角組件控制器注入問題

對於指令，我們可以這樣寫：

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）會使我的代碼制動Unknown provider: aProvider <- a,

那麼如何正確寫入元件注入？

有什麼建議嗎？

的演示中，我使用Plunker

來源

2016-02-26 Maxim Shoustin

您需要在微小的語法來包裝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-註釋，你可以刪除上面的myComponentCtrl.$inject = ['$scope', '$timeout'];線。

來源

2016-02-26 20:38:19 Nix

是的，第一個選項是非常醜陋的形式，同意'ng-annotate'。 –

我喜歡這個更清晰的例子，但我無法理解它。在實際創建對象之前，您如何在myComponentCtrl上設置$ inject屬性？此外，您正在將控制器賦予在實際聲明控制器功能之前聲明的組件。這將如何工作？我認爲這個更簡潔的例子中缺少一些東西。 – Liviu

@Liviu谷歌「javascript提升」。 TL; DR：JavaScript var和函數聲明被「提升」到範圍的頂部，因此您可以在代碼中的任何位置聲明一個函數，並以相同的方式訪問它，就好像您在當前開始時聲明的那樣範圍。 –

您可以繼續前進，併爲您的控制器使用數組表示法。

app.component('myComponent', { 
    restrict: 'E', 
    bindings: { 
     data: '=' 
    }, 
    templateUrl: 'template.html', 
    controllerAs: 'vm', 
    controller: ['$scope', function ($scope) { 

    }] 
});

我寧願但是做的是我的構建流水線自動您注射轉換成數組方式使用像ng-annotate的工具，讓你的源代碼並不需要擔心。

來源

2016-02-26 20:39:24 Prashant

角組件控制器注入問題

回答

相關問題