Question

据我所知，在＆＃39;指令定义对象＆＃39;上使用控制器属性每次链接给定指令时，都会创建该控制器的单独实例吗？

现在玩控制器作为模式我可以看到，当编译每个指令时，控制器工厂函数被触发，为this.data.hello方法提供不同的结果。

但在我看来，我正在获得该控制器的最后一个实例。这是为什么？我错过了什么？

JS

angular.module('app', [])
  .controller('customCtrl', function () {
      console.log('controller');

      this.data = {
          hello: Math.floor(Math.random() * 200 + 1)
      };
  })
  .directive('customDrv', function () {
      var linkFn = function (scope, element, attrs, ctrl) {
          console.log('link');
          console.log(ctrl.data.hello);
      };

      return {
          templateUrl: 'Home/CustomDrv',
          restrict: 'E',
          controller: 'customCtrl',
          controllerAs: 'vm',
          compile: function (element, attrs) {
              console.log('compile');

              return linkFn
          }
      }
  })

HTML

<custom-drv></custom-drv>
<custom-drv></custom-drv>
<custom-drv></custom-drv>
<custom-drv></custom-drv>

Plunker：https://plnkr.co/edit/HII9a7Ff6ryXuz6Fgzr6

Answer 1

要获得this.data.hello方法的不同结果，请将隔离范围创建为 -

angular.module('app', [])
  .controller('customCtrl', function () {
      //console.log('controller');

      this.data = {
          hello: Math.floor(Math.random() * 200 + 1)
      };
  })
  .directive('customDrv', function () {
      var linkFn = function (scope, element, attrs, ctrl) {
          //console.log('link');
          console.log(ctrl.data.hello);
      };

      return {
          template: '<h1>{{vm.data.hello}}</h1>',
          restrict: 'E',
          scope: {},
          controller: 'customCtrl',
          controllerAs: 'vm',
          compile: function (element, attrs) {
              //console.log('compile');

              return linkFn
          }
      }
  })

Answer 2

// Creates the arc for the pie chart
    var pieArc = d3.svg.arc()
                    .startAngle(0)
                    .innerRadius(0)
                    .outerRadius(100);

    // Draw the circles (carrierServices portion)
    var pieChartsCarrierServices = pieChartsSvg.selectAll(".CarrierServicesPies").data(data);
    pieChartsCarrierServices.enter()
                            .append("path")
                                .attr({
                                    "class": "CarrierServicesPies",
                                    "d": function (d) {
                                        pieArc.endAngle((2 * Math.PI) * d.carrierServicesPct)

                                        return pieArc();
                                    },
                                    "transform": function (d) {
                                        var w = $(this).parent().width();

                                        return "translate(" + (w/2) + "," + (yScale(d.id) + 50) + ")" // Radius divided by 2 to center with bar graphs
                                    },
                                    "fill": "white"
                                });
    pieChartsCarrierServices.exit().remove();
    pieChartsCarrierServices.transition().duration(750)
                            .attr({
                                "d": function (d) {
                                    pieArc.endAngle((2 * Math.PI) * d.carrierServicesPct)

                                    return pieArc();
                                }
                            });

仅设置data.hello一次（在控制器负载上）。如果您每次都想要不同的结果，请说：

this.data = {
      hello: Math.floor(Math.random() * 200 + 1)
  }

并使用

调用它

this.data = {
      hello: function(){
        return Math.floor(Math.random() * 200 + 1);
      }
  }

工作plunkr

但是，您可能希望通过绑定传递ctrl.data.hello()函数，而不是直接从指令访问它（更好的做法）：

标记：

hello

指令：

<custom-drv hello="hello"></custom-drv>

使用带有controllerAs的指令

2 个答案: