Question

我有一个AngularJS应用程序，我在其中创建了一个指令myp-my-directive，它根据属性my-attribute在屏幕上绘制图表。我就是这样做的。它有效：

HTML

<myp-my-directive my-attribute="[1, 2, 3]">
</myp-my-directive>

Angular Directive：

myapp.directive('mypMyDirective',function() {
    return {
      restrict:'E',
      scope: {
        myAttribute: '='
      },
      controller: 'StuffCtrl',
      controllerAs: 'stuffCtrl',
      bindToController: true,
      templateUrl: 'myHtml.html'
    };
  }
);

角度控制器：

myapp.controller('StuffCtrl', function($scope) {
    var self = this;

    $scope.$watch(function() {return self.myAttribute;}, function (objVal)
      {
        if (!(typeof objVal === "object" && objVal.length > 0)) {

          var myObject = Object.assign({}, objVal.data);
          // Draw a fancy chart based using d3.js based on myObject
        }
      }
    );
  }
);

以上作品。

但我刚刚意识到我需要根据2个属性绘制图表，而不仅仅是1.我明白我可以通过将数组返回$scope.$watch而不是单个值并传递最终参数来做到这一点true到它。就目前而言（作为临时步骤）我调整了我的控制器以获取包含一个值的数组，以查看是否可行。我的控制器现在看起来像这样：

myapp.controller('StuffCtrl', function($scope) {
    var self = this;

    $scope.$watch(function() {return [self.myAttribute];}, function (objVal)
      {
        if (!(typeof objVal[0] === "object" && objVal[0].length > 0)) {

          var myObject = Object.assign({}, objVal[0].data);
          // Draw a fancy chart based using d3.js based on myObject
        }
      }
    );
  }, true
);

但这会产生以下错误：

angular.js:13236 RangeError: Maximum call stack size exceeded
    at equals (angular.js:1048)
    at equals (angular.js:1058)
    at equals (angular.js:1074)
    at equals (angular.js:1058)
    at equals (angular.js:1074)
    at equals (angular.js:1058)
    at equals (angular.js:1074)
    at equals (angular.js:1058)
    at equals (angular.js:1074)
    at equals (angular.js:1058)

为什么呢？难道我的控制器的两个版本不相同吗？为什么一个工作但另一个工作失败？从指令向控制器发送第二个属性的最佳方法是什么？

Answer 1

对于必须使用$scope.$watchCollection()的数组。阅读here

试试这个

$scope.$watchCollection(function() {return [self.myAttribute];}, function (newVal, oldVal)
  {
    if (!(typeof newVal[0] === "object" && newVal[0].length > 0)) {

      var myObject = Object.assign({}, newVal[0].data);
      // Draw a fancy chart based using d3.js based on myObject
    }
  }
);

当我告诉它观看一个数组时，为什么AngularJS $ scope.watch（）停止工作？

1 个答案: