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>

view.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 に答える