Question

我有一个＆＃34;条形图＆＃34; 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();
             }

Answer 1

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

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>

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

不将属性（watchExpression）传递给$scope.$watch函数的缺点是，您实际上正在观察哪些属性的更改缺乏明确性。如果有人要在barChart的隔离范围内引入新的属性，那就是“裸露的＆＃39; $scope.$watch会接受这些属性的变化。

此外，没有传递watchExpression的$scope.$watch即使对不属于隔离范围的属性进行更改，也会调用自身。 JsBin在这里说明它（打开控制台并更改第二个输入字段中的$wat属性）：

http://jsbin.com/luvotohi/1/edit

Answer 2

您可以尝试使用以下代码

＆＃13;

function link(scope, element, attrs, Ctrl) {

    scope.$watchCollection(function() {

        var k = 0;

        for (var prop in attrs) {
            if (attrs.hasOwnProperty(prop)) {
                if (!attrs[prop]) ++k
            }
        }
      
        if (k === 1) {
            return attrs
        }

    }, function(value) {
        if (value) {
            // use new value or scope
        }
    }, true);
}

＆＃13;

Answer 3

您可以在不提供监视表达式的情况下传递监听器。

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

Angularjs - 观察所有指令范围属性？

3 个答案: