AngularJS 选项卡导航和模块注入答案

【问题标题】：AngularJS tab navigation and module injectionAngularJS 选项卡导航和模块注入
【发布时间】：2013-10-18 13:48:29
【问题描述】：

我在两个单独的文件中有两个模块：

first.js

var app = angular.module('first',['ngGrid']);  
app.controller('firstTest',function($scope))
{  
   ...
});

second.js

var app = angular.module('second',['ngGrid']);  
app.controller('secondTest',function($scope))
{  
   ...
});

我现在想在导航类型视图中再次使用这两个模块：

tabs.js

var app = angular.module('myTabs',['first','second']);  
$scope.tabs = [    
    {title: "first", content:first.firstTest},
    {title: "second", content:second.secondTest},
];  

$scope.navType='pills';  
});

发生的情况是我收到以下错误：

unknown provider firstProvider <- first

所以我的问题是
1) 这是进行选项卡式导航的正确方法吗
2) 处理first 和second 模块注入的正确技术是什么？

【问题讨论】：

标签： javascript angularjs model-view-controller dependency-injection

【解决方案1】：

在我们的应用程序中，我们使用了ngClass 指令。

ng-class="{active:isActive('/tab1')}"

其中isActive 是作用域中定义的函数。此函数需要$location 变量。

myApp.controller('MyCtrl', function($scope, $location) {
$scope.isActive = function(route) {
    return route === $location.path();
}
});

如果您使用这种解决方案，您可以使用 URL 位置直接跳转到特定选项卡。
另请查看$routeProvider 以供参考。

【讨论】：