使用Angular.js添加控制器時出錯

Question

使用Angular.js通過UI-ROUTER設置控制器時出現以下錯誤。

Error: [ng:areq] http://errors.angularjs.org/1.4.6/ng/areq?p0=productDataController&p1=not%20aNaNunction%2C%20got%20undefined
    at Error (native)
    at http://oditek.in/medilink_global/js/angularjs.js:6:416
    at qb (http://oditek.in/medilink_global/js/angularjs.js:22:131)
    at Sa (http://oditek.in/medilink_global/js/angularjs.js:22:218)
    at http://oditek.in/medilink_global/js/angularjs.js:80:81
    at q (http://oditek.in/medilink_global/js/angularuirouter.js:7:14338)
    at http://oditek.in/medilink_global/js/angularuirouter.js:7:14796
    at $ (http://oditek.in/medilink_global/js/angularjs.js:73:89)
    at K (http://oditek.in/medilink_global/js/angularjs.js:62:39)
    at h (http://oditek.in/medilink_global/js/angularjs.js:54:410)

我在下面解釋我的代碼。

route.js：

var Admin=angular.module('medilink',['ui.router']);
Admin.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/product');
    $stateProvider
     .state('product', { 
            url: '/product',
            templateUrl: 'productview/product.html',
            controller: 'productController'
        })
    .state('product.catagory',{
        url:'/catagory',
        templateUrl:'productview/catagory.html',
        controller:'catagoryController'
    })
    .state('product.productinfo',{
        url:'/info',
        templateUrl:'productview/productinfo.html',
        controller:'productInfoController'
    })
    .state('product.productdata',{
        url:'/data',
        templateUrl:'productview/productdata.html',
        controller:'productDataController'
    })
});

productDataController.js：

var info=angular.module('medilink');
    info.controller('productDataController',function($state,$http,$window,$scope){
        $scope.buttonName="Add";
    });
    info.directive('customOnChange', function() {
      return {
        restrict: 'A',
        link: function (scope, element, attrs) {
          var onChangeHandler = scope.$eval(attrs.customOnChange);
          element.bind('change', onChangeHandler);
        }
      };
    });

在這里，當我在此控制器頁面中包含控制器名稱時，會引發此類錯誤。請幫助我解決此錯誤。

Answer 1

正如錯誤所言，我的猜測是您沒有在主HTML文件中包含productDataController.js文件。

<script src="/js/productDataController.js"></script>

角度錯誤頁面

Answer 2

好吧，當您調用angular.module()您將創建一個新模塊。 在官方文檔中說該功能也用於檢索模塊，但是AFAIK最好在主全局模塊定義中注冊控制器。

在您的情況下， angular.module()不返回模塊。 我可以假設angular嘗試創建一個新模塊。

因此，您的主模塊文件應為：

var Admin=angular.module('medilink',['ui.router']);
Admin.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/product');
    $stateProvider
     .state('product', { 
            url: '/product',
            templateUrl: 'productview/product.html',
            controller: 'productController'
        })
    .state('product.catagory',{
        url:'/catagory',
        templateUrl:'productview/catagory.html',
        controller:'catagoryController'
    })
    .state('product.productinfo',{
        url:'/info',
        templateUrl:'productview/productinfo.html',
        controller:'productInfoController'
    })
    .state('product.productdata',{
        url:'/data',
        templateUrl:'productview/productdata.html',
        controller:'productDataController'
    })
});
Admin.controller('productDataController',function($state,$http,$window,$scope){
        $scope.buttonName="Add";
    });
    info.directive('customOnChange', function() {
      return {
        restrict: 'A',
        link: function (scope, element, attrs) {
          var onChangeHandler = scope.$eval(attrs.customOnChange);
          element.bind('change', onChangeHandler);
        }
      };
    });

將所有定義拆分為單獨的文件並且僅使用構造函數的名稱也是一種好習慣

module.js：

var module = angular.module("module_name", [ "dependencies" ]);
module.controller("controllerNameInUse", controllerConstructor);
module.config(configConstructor)

controller.js：

var controllerConstructor = function($scope) {
    //your controller code here
};
controllerConstructor.$inject = ["$scope"]

config.js：

var configConstructor = function($scope) {
    // your config code here
};
configConstructor.$inject = ["$scope"];