Question

我使用plunker http://plnkr.co/edit/yF8H9i8tyu1o2xJCN9bV

中的范围创建了一个d3条形图指令

控制器在范围内有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

我将控制器的范围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

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

1 个答案: