Angularjs-查看所有指令范围属性？

我在Angular中有一个“条形图”指令，我想在它的许多范围属性中的一个发生变化时重新渲染它

我想知道我在观看范围方面有什么选择…
由于渲染方法与更改的属性无关，因此理想情况下，我希望观察整个隔离范围的更改-这可能吗？我看到的备选方案是监视属性集合或将所有属性存储在scope.object中，然后监视该对象

angular.module('chartPackage')
    .directive('barChart', [function() {

        return {
            restrict: 'E',

            scope: {
                width: '=',
                height: '=',
                fontSize: '=',
                data: '=',
                colorMap: '=',
                onClick: '=',
                transition: '=',
            },

        link: function(scope, element, attrs) {

             // How to watch all attributes?
             scope.$watch('??????', function(a,b) {
                render();
             }

---

您可以简单地传递侦听器，而不提供watch表达式

scope.$watch(function(newValue, oldValue) {
  console.log(newValue.width);
});

---

我认为最干净的选择是将所有预期属性包装到一个对象中，如您所述，并执行以下操作：

angular.module('chartPackage')
  .controller('ctrl', function ($scope) {
    $scope.object = {
      width: '',
      height: '',
      fontSize: '',
      data: '',
      colorMap: '',
      onClick: '',
      transition: ''
    };
  })
  .directive('barChart', function() {

    return {
      restrict: 'E',

      scope: {
        object: '='
      },

      link: function(scope, element, attrs) {

        function render () {
          // some render function
        }

        scope.$watch('object', function (a, b) {
          render();
        }, true);

      }
    };
  });

  <bar-chart object="object"></bar-chart>

angular.module（'chartPackage'）
.controller（'ctrl'，函数（$scope）{
$scope.object={
宽度：“”，
高度：''，
字体大小：“”，
数据：“”，
颜色映射：“”，
onClick:“”，
转换：“”
};
})
.directive（'barChart'，function（）{
返回{
限制：'E'，
范围：{
对象：'='
},
链接：函数（范围、元素、属性）{
函数渲染（）{
//一些渲染函数
}
范围$watch（'对象'），功能（a，b）{
render（）；
}，对）；
}
};
});

我想您可以在模板中定义对象属性，我个人的偏好是在调用控制器上下文中定义它

不将属性（watchExpression）传递给

$scope.$watch

函数的缺点是，您实际上在监视哪些属性的更改，这一点不清楚。如果有人在

条形图的隔离范围上引入新属性，则“裸”的
$scope.$watch
也会发现这些属性的变化

另外，
$scope.$watch
在没有传递watchExpression的情况下，即使对不属于隔离作用域的属性进行了更改，也会调用自身。JsBin在此演示（打开控制台并更改第二个输入字段中的
$wat
属性）：

您可以尝试使用以下代码


功能链接（范围、元素、属性、Ctrl）{
作用域$watchCollection（函数（）{
var k=0；
for（属性中的var prop）{
如果（属性hasOwnProperty（prop））{
如果（！attrs[prop]）++k
}
}
如果（k==1）{
返回属性
}
}，函数（值）{
如果（值）{
//使用新值或范围
}
}，对）；
}
请注意，如果您不传递
$watch
watchExpression，则对
条形图范围之外的模型所做的任何更改都将触发渲染功能。只是要记住一点。啊，所以我不能把它限制在指令的范围内？不，你需要给它传递一个watchExpression，否则它只会在每个
$digest
上触发。请参阅我的答案，了解将其限制为一组传入属性（整齐地隐藏在对象中）的正确方法。我理解其中的含义，但OP已经提到了您建议的解决方案。我正要编辑此帖子，并添加有关其缺点的详细信息。但你似乎已经解释过了。是的，OP已经提到了。在我的回答中，我只是说“是的，你所做的是正确的”。但是，查看整套
$scopes
并在每个
$digest
上触发
render（）
函数很可能不是OP想要的。我很抱歉，如果我表现得粗鲁，我只是觉得你的回答在目前的状态下有点误导。如果可以，请添加有关缺点的详细信息：）也许您可以使用
watchGroup
？