ng-view 的不同文件中的不同控制器

Question

我正在为不同的视图使用两个控制器（在不同的 js 文件中）。

我的主力HTML

============================================= ===================================

<html ng-app="MyApp">

<head>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="/JS/utilityJS/angular.min.js"></script>
    <script type="text/javascript" src="/JS/utilityJS/angular-route.js"></script>
     <script type="text/javascript" src="/JS/app.js"></script>
     <script type="text/javascript" src="/JS/controllerLocation.js"></script>
     <script type="text/javascript" src="/JS/controllerItem.js"></script>
</head>

<body>
    <div id="populateDiv" >
         <div id="header"   ng-include src="'/pages/header.html'"></div> 
        <div id="footer" ng-include src="'/pages/footer.html'"></div>
        <div id="groceryBg" class=" mainContentBg" style=""> </div>
        <div ng-view=""></div>
</div>
</body>
</html>

App.js // 主 js 文件

 angular.module('controllersModule', []);
    var AppModule = angular.module('MyApp', ['ngRoute','controllersModule']);

    AppModule 
    .service('locationService', function ($http) {
    ......  
    }

    AppModule .config(['$routeProvider',
      function($routeProvider) {


        $routeProvider.
          when('/Load/', {
            templateUrl: 'location.html',
            controller: 'locationCtrl'
          }).
          when('/Items/', {
            templateUrl: 'items.html',
            controller: 'itemsCtrl'
          }).
          otherwise({
            redirectTo: '/Load/'
          });
      }]);

controllerLocation.js // 位置控制器

 angular.module('controllersModule').controller('locationCtrl', ['$rootScope', '$scope','$route', '$http','$location','locationService', '$routeParams',
        function($rootScope, $scope, $route,$http,$location,locationService, $routeParams)
        {

    $location.path("/Items");
    }

controllerItem.js // 物品控制器

 angular.module('controllersModule').controller('itemsCtrl' ['$rootScope', '$scope', '$route', '$http', 'locationService', '$routeParams',
        function($rootScope, $scope, $route, $http, locationService, $routeParams)
        {


            console.log("Scope id Items is:- " + $scope.$id);

    }

location.html // 位置 html

 <html>
    <head>

    </head>
    <body>

     <div> 
    Location.....
    </div>
    </body>
    </html>

items.html

 <html>
    <head>

    </head>
    <body>

     <div> 
    Items.....
    </div>
    </body>
    </html>

============================================= ===================================

当我调用 /Load 并调试它时，它会显示 location.html 内容并加载 controllerLocation。但是在 $location.path("/Items"); 之后它加载 items.html 但不加载 controllerItem 并抛出 erroenter code herer http://errors.angularjs.org/1.2.22/ng/areq?p0=itemsCtrl&p1=not%20aNaNunction%2C%20got%20undefined.

你能帮忙找出问题所在吗？

Answer 1

您在 itemsCtrl 的声明中忘记了逗号和右方括号

angular.module('controllersModule').controller('itemsCtrl', ['$rootScope', '$scope', '$route', '$http', 'locationService', '$routeParams',
function($rootScope, $scope, $route, $http, locationService, $routeParams)
{
    console.log("Scope id Items is:- " + $scope.$id);
}]);

ng-view 的不同文件中的不同控制器

Different controllers in different files for ng-view

angularjs

ng-view

App.js // 主 js 文件

controllerLocation.js // 位置控制器

controllerItem.js // 物品控制器

location.html // 位置 html

items.html