javascript - controllerAs 在指令的链接功能中不起作用

Question

我使用 plunker 中的范围创建了一个 d3 条形图指令 http://plnkr.co/edit/yF8H9i8tyu1o2xJCN9bV

Controller 的范围内有 chartData。

.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

我将 Controller 的作用域图表数据更改为此

 .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 方式绑定(bind)，而不是 bindToDirective，在指令设置中没有像这样的可识别属性。

2) 需要使用 bindToController 标志来指定要添加到 Controller 实例的任何范围绑定(bind) 2 路绑定(bind)属性，而不是直接在范围上。尽管您可以执行 bindToController:{chartData:"="} ，但官方文档中没有记录，因此我不建议这样做，因为它也可以在即将推出的版本。

3) 您可以将链接函数的第四个参数用作 Controller 实例，并在您的链接函数中引用它。

看起来像

.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