angularjs – 角度组件控制器注入问题

发布时间：2020-12-17 06:48:15 所属栏目：安全来源：网络整理

导读：Angular 1.5推出了 components(特殊指令) 对于指令,我们可以写： app.directive('myDirective',['$timeout','$mdToast','$rootScope',// -- injection function ($timeout,$mdToast,$rootScope) {return { link: {},//... } } 我们如何为组件编写注入？我肯

Angular 1.5推出了 components(特殊指令)

对于指令,我们可以写：

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

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

我肯定可以写,像：

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

和：

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

但我想编写内置控制器,如：

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

上面提到的样式缩小(GRUNT)会使我的代码无效提供者：aProvider< - a,那么如何正确编写组件注入？有任何想法吗？演示我使用Plunker

解决方法

你需要在缩小语法中包装controller：function($scope,$timeout){

我实际上不是内联的粉丝,但是：

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

清洁形式：

app.component('myComponentCtrl',controller: myComponentCtrl
})


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

}

第三个选项是使用ng-annotate,你可以删除myComponentCtrl.$inject = [‘$scope’,’$timeout’];上面的一行.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!