angularjs - Angular 组件 Controller 注入(inject)问题

Question

Angular 1.5 引入 components (特殊类型的指令)

对于指令，我们可以写:

app.directive('myDirective',
            ['$timeout','$mdToast','$rootScope',  // <-- injection
            function ($timeout, $mdToast,$rootScope) {
return {
   link: {},
    //...
        }
    }

我们如何为组件编写注入(inject)？

当然我可以写，比如:

app.component('myComponent',  {
            restrict: 'E',
            bindings: {
                data: '='
            },
            templateUrl: 'template.html',
            controllerAs: 'vm',
            controller: 'myComponentCtrl'
    });

和:

app.controller('myComponentCtrl', 
    ['$scope',  '$timeout', 
     function ($scope, $timeout) {
   // ....
}]); 

但我想编写内置 Controller ，例如:

app.component('myComponentCtrl', {
  templateUrl: 'template.html',
  controller: function($scope, $timeout) {
    //...
  }
});

上面提到的样式缩小(GRUNT)会破坏我的代码 Unknown provider: aProvider <- a ,

所以 如何为组件编写正确的注入(inject)？

有任何想法吗？

我使用的演示 Plunker

Answer 1

您需要包装 controller: function($scope, $timeout) {在缩小语法中。

我实际上不是内联的粉丝，但是:

app.component('myComponentCtrl', {
 templateUrl: 'template.html',
 controller: ['$scope', '$timeout', function($scope, $timeout) {
  //...
 }]
});

清洁剂形式:

app.component('myComponentCtrl', {
 templateUrl: 'template.html',
 controller: myComponentCtrl
})


myComponentCtrl.$inject = ['$scope', '$timeout'];
/* @ngInject */
function myComponentCtrl($scope, $timeout) {
  //...

}

第三个选项是使用 ng-annotate 并且您可以删除 myComponentCtrl.$inject = ['$scope', '$timeout'];上面的线。