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

正如错误所说，我的猜测是你没有将 productDataController.js 文件包含在主HTML文件中。

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

Angular error page

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"];

使用Angular.js添加控制器时出错

2 个答案: