如何使用AngularJS和Bootstrap创建选项卡 - 需要修改现有代码

我在stackoverflow上找到了一个如何使用AngularJS和Bootstrap创建选项卡的好例子，但我遇到了问题。原始代码使用Angular的老库（1.0.4），如果我切换到当前版本（1.4.7），脚本不再工作。如何使用AngularJS和Bootstrap创建选项卡 - 需要修改现有代码

原来这里是code on Plunker

这里是original Post

这是我到目前为止已经试过改变：

var app = angular.module('plunker', ['ngRoute']); 
app.config(function($routeProvider, $locationProvider) { 
    $routeProvider 
     .when('/jobs', { 
     templateUrl: 'jobs-partial.html', 
     controller: JobsCtrl 
     }) 
     .when('/invoices', { 
     templateUrl: 'invoices-partial.html', 
     controller: InvoicesCtrl 
     }) 
     .when('/payments', { 
     templateUrl: 'payments-partial.html', 
     controller: PaymentsCtrl 
     }) 
     .otherwise({ 
     redirectTo: '/jobs' 
     }); 
});

问题出在哪里？

来源

2015-10-20 Elvira Emm

由于AngularJS 1.2和更高版本：

ngRoute is now its own module

由于AngularJS 1.3和更高版本：

... $controller将不再寻求对窗控制器。为控制器寻找窗口的旧行为最初用于示例，演示和玩具应用程序。我们发现允许全局控制器功能鼓励不良实践，所以我们决定默认禁用此行为。

因此[1]添加ngRoute作为依赖于你的模块和[2]包括angular-route.js源文件和[3]明确地注册所述控制器固定它为我：

http://plnkr.co/edit/KJyFqf2vf74IidY26vxu?p=preview

[ 1]

var app = angular.module('plunker', ['ngRoute']);

[2]

<script src="http://code.angularjs.org/1.4.7/angular-route.js"></script>

[3]

app.controller('TabsCtrl', TabsCtrl); 
app.controller('JobsCtrl', JobsCtrl); 
app.controller('InvoicesCtrl', InvoicesCtrl); 
app.controller('PaymentsCtrl', PaymentsCtrl);

来源

2015-10-20 23:59:23

谢谢您的回答！你能解释为什么我需要明确注册控制器吗？为什么之前不需要它？ –

@ElviraEmm不客气！是的，我可以解释：您需要明确注册它们，因为它们在1.3中放弃了支持。我已经用他们网站的报价更新了我的答案。 –

再次感谢您！ –

旧版本的角度允许使用全球用作控制器。

对1.3版本的支持已在版本1.3中删除，您需要将控制器注册为模块组件。

ngRoute而且现在是一个单独的包含和必须注射作为模块依赖

下面是使用角1.4更新的演示。该控制器使用注册

注：

angular.module('plunker') 
.controller('TabsCtrl',TabsCtrl) 
.controller('InvoicesCtrl',InvoicesCtrl) 
.controller('PaymentsCtrl',PaymentsCtrl)

而且在路由控制器现在是字符串。此外ngRoute是作为模块依赖

var app = angular.module('plunker', ['ngRoute']); 

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { 
    $routeProvider. 
     when('/jobs', {templateUrl: 'jobs-partial.html', controller: 'JobsCtrl' }).

DEMO

来源

2015-10-21 00:03:55 charlietfl

如何使用AngularJS和Bootstrap创建选项卡 - 需要修改现有代码

回答

相关问题