controllerAs指令中的鏈接功能不工作

Question

我創造了plunker http://plnkr.co/edit/yF8H9i8tyu1o2xJCN9bV

與範圍有chartData控制器使用範圍D3條形圖指令。

.controller('d3Controller', ['$scope', function($scope) { 
     $scope.chartData = [10,20,30,40,50]; 
    }]) 

，我有chartData與指令的隔離範圍

  scope: { 
       chartData: '=' 
      }, 
      restrict: 'EA', 
      replace: false, 
      link: function (scope, elem, attrs) { 
      var data = attrs.chartData.split(','); 
      var d3 = $window.d3; 
      var chart = d3.select(elem[0]); 

      chart 
       .append("div") 
       .attr("class", "chart") 

       //returns an array of all <div>...</div> elements in div 
       .selectAll("div") 
        .data(scope.chartData) 
       .enter() 
        .append("div") 
        .transition().ease("elastic") 
        .style("width", function (d) { 
         return d + "%" 
        }) 
        .text(function (d) { 
         return d + "%" 
        }); 

雙向協會和相關的指令是如下

<bar-chart chart-data="chartData"></bar-chart> 

這是工作的罰款。但是，我正在嘗試使用「controllerAs」來執行相同的操作。

我嘗試了一些更改，但它不起作用。

http://plnkr.co/edit/eIRkAtfJx9rlWN5LtllC

我改變了控制器的作用域chartData這個

.controller('d3Ctrl', ['$scope', function($scope) { 
     var self = this; 
     self.chartData = [10,20,30,40,50]; 
    }]) 

使用controllerAs和bindToDirective選項指令

 scope: { }, 
     controllerAs: 'barCtrl', 
     controller: function() { }, 
     bindToDirective: { 
     chartData: '=' 
     }, 

試圖讓chartData時

，跟它barCtrl不

定義。

.selectAll("div") 
.data(barCtrl.chartData) 

我在做什麼錯？

Answer 1

您錯誤地在controller As代碼中執行了一些操作。

1）您需要通過scope屬性指定2路綁定，而不是設置爲bindToDirective，在指令設置中沒有類似的屬性。

2）需要使用bindToController標誌來指定任何範圍勢必被添加到控制器實例2種方式結合性質，而不是直接在範圍。雖然你可以做bindToController:{chartData:"="}它沒有在官方文檔中記錄，因此我不會推薦這樣做，因爲它可能會在以後的版本中被刪除。

3）您可以使用鏈接函數的第4個參數作爲控制器實例，並在鏈接函數中引用它。

因此，它看起來像

.directive('barChart', ['$window', function($window) { 
     var myDirective = { 
      controllerAs: 'barCtrl', 
      controller: angular.noop, 
      bindToController:true, //<-- Need to specify bound values to be added to the controller instance 
      scope: { //Need to use scope not bindToDirective 
      chartData: '=' 
      }, 
      restrict: 'EA', 
      replace: false,//if it is false you don't need it 
      //use the 4th argument as the controller instance 
      link: function (scope, elem, attrs, barCtrl) { 

      } 

Demo