0

我有以下 Angular 1.5 组件：

  (function () {
    'use strict';

    angular
    .module('EmployeeInformation')
    .controller('EmployeeDetailCtrl', EmployeeDetailCtrl)
    .component('employeeDetail', EmployeeDetail);

    var EmployeeDetail = {
      templateUrl: '../views/components/employeeDetail.html',
      controller: 'EmployeeDetailCtrl as empdetail',
      bindings: {
        employee: '<'
      }
    };

    function EmployeeDetailCtrl() { }
  })();

根据 Angular 网站上的示例，这对我来说似乎是正确的。但是，当我在我的页面上包含该文件时，我收到一条错误消息，指出它无法注册该组件：

[$injector:modulerr] Failed to instantiate module EmployeeInformation due to:
TypeError: Cannot read property 'controller' of undefined
    at $CompileProvider.registerComponent [as component]

如果我删除对此组件的引用，则页面加载正常。有谁知道我做错了什么？

编辑：我在同一个模块中有一个服务类似地组成（它被包装在一个函数中并且没有一个空数组 - 见下文），它可以正常工作：

(function () {
  'use strict';

  angular
  .module('EmployeeInformation')
  .service('EmployeeService', EmployeeService);

  EmployeeService.$inject = ['$http'];

  function EmployeeService($http) {
    var apiPrefix = 'http://dvlemployees/api/employees';
    this.find = find;
    this.get = get;
    this.getOne = getOne;

    function find(queryObj) { }

    function get() { }

    function getOne(empNumber) { }
})();

EDIT2：感谢@Frondor，我发现真正的问题是angular.component我在定义对象之前就调用了它。将该var EmployeeDetail部分移至顶部解决了该问题。

4

2 回答 2

3

JavaScript

(function(angular) {
  'use strict';
angular.module('EmployeeInformation', [])
.controller('EmployeeDetailCtrl', EmployeeDetailCtrl)
.component('employeeDetail', {
  templateUrl: 'view.html',
  controller: EmployeeDetailCtrl,
  bindings: {
    hello: '='
  }
});

function EmployeeDetailCtrl(){
  this.world = 'World!';
}
})(window.angular);

HTML

<body ng-app="EmployeeInformation">
  <!-- components match only elements -->
<div ng-controller="EmployeeDetailCtrl as ctrl">
  <h1>
  <employee-detail hello="'Hello'"></employee-detail>
  </h1>
</div>
</body>

视图.html

<span>{{$ctrl.hello}} {{$ctrl.world}}</span>

即使您没有对应用程序使用任何依赖项，您也需要在模块名称后指定一个空数组。

现场示例：

http://plnkr.co/edit/8TbRcg5LBsdlqxLkUccJ?p=preview

于 2016-04-06T13:27:17.590 回答
1

尝试一下：

(function (angular) {
  'use strict';

  angular
    .module('EmployeeInformation', [])
    .controller('EmployeeDetailCtrl', EmployeeDetailCtrl)
    .component('employeeDetail', EmployeeDetail)
  ;

  var EmployeeDetail = {
    templateUrl: '../views/components/employeeDetail.html',
    controller: 'EmployeeDetailCtrl as empdetail',
    bindings: {
      employee: '<'
    }
  };

  function EmployeeDetailCtrl() { }
})(angular);
于 2016-04-06T13:52:52.133 回答