Question

我在stackoverflow上发现了如何使用AngularJS和Bootstrap创建Tabs的一个很好的例子，但是我有一个问题。原始代码使用的是Angular的旧库（1.0.4），如果切换到当前的（1.4.7），脚本将不再起作用。

以下是我到目前为止所做的改变：

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'
      });
});

问题出在哪里？

Answer 1

从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);

Answer 2

较旧版本的角度允许使用全局函数作为控制器。

版本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

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

2 个答案: