App.js // main js file

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 // main js file

 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>

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

当我调用/加载并调试它时，显示location.html内容并加载controllerLocation。但在$ location.path（“/ Items”）之后;它加载items.html但没有加载controllerItem并抛出erro enter code here r 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的不同文件中的不同控制器

App.js // main js file

controllerLocation.js //位置控制器

controllerItem.js //项目控制器

location.html //位置html

items.html

1 个答案: