Question

我创建了一个渲染d3的指令，它从像这样的道具中获取数据：

<my-directive words="fromControllerData"></my-directive>

现在“fromControllerData”可以由父级更改，我想要重新呈现我的指令。

如何收听数据更改？

找到了很多例子，但都没有效果......

这是项目的链接：https://plnkr.co/edit/I6eyFMBrhoDpxfOsulrI?p=preview

你会看到指令：

app.js // line 48

我尝试了范围。$ watch和scope。$ watchCollection ...

一些代码用于解释：

控制者：

app.controller('AppController', ['$scope', '$rootScope', 'serverData', function($scope, $rootScope, serverData) {
$scope.data = {
    words: serverData
};

setTimeout(function() {
  console.log('changegd');
  $scope.data.words = [];  
}, 1000);

}]);

一些指令代码：

app.directive("gravityWordCloud", ['serverData', function(serverData) {
return {
    restrict: "EA",
    scope: {
        words: "="
    },
    link: function(scope, element, attrs) {
        // dontcare stuff

        //this happens only on first load......
        //but never again
        scope.$watchCollection('words', function() {
          console.log(scope.words);

        });

    }
}
}])

Answer 1

使用此：

scope.$watch('scope.words', function() {
    console.log(scope.words);
}, true);

$ watch函数仅比较对象的引用，该引用不会更改。添加最后一个'true'参数使其成为一个“深层”手表。 Angular文档中的函数签名（https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope）：

$watch(watchExpression, listener, [objectEquality]);

另一种方法是创建一个返回单词的函数，并观察函数：

scope.$watch(function() {
    return someFunctionThatReturnsWords();
}, function() {
    console.log(scope.words);
});

编辑：你还看了'words'而不是'scope.words'

Answer 2

我已将以下代码添加到您的Plunker中，这有效：

var getWords = function() {
    return scope.words;
}

scope.$watch(getWords, function() {
    console.log(scope.words);              
}, true);

Answer 3

无论谁得到这个错误，这是最小的事情，但浪费了很多时间......

我注意到“words”变量在控制器范围内也没有更新，当它处于“超时”时，但是当我稍后用另一种方法手动修改它时突然点击某些东西我也看到了超时的变化。

底线：当我改变javascript时：

setTimeout

到角度：

$timeout

突然一切都很好......

所以它可能是范围和东西......

角度指令听取道具改变不行为

3 个答案: