javascript - 从函数评估值时 $watch 似乎不起作用

Question

我有一个渲染网格 block 的转发器。这些 block 中的每一个都具有“投好票”、“投坏票” 或“不投” 的属性(出于我们的目的)。此属性控制 block 的 CSS 类等。

用户投票的数据结构通过 userService 访问，它公开了更新投票、执行 ajax 调用等的方法。

我的问题是:

我通过调用 userService 在每个特定 block 的范围内设置 voteClass 属性。我想观察此属性并在其模型更改时相应地更新 UI。

然而，这似乎不起作用 - voteClass 不会重新评估并且 $watch 不会被调用，即使 getVoteClass( scope.block.id) 确实改变了。

我试过使用 $apply，但似乎没有任何改变。

非常感谢您的意见...

Update1:我认为即使 getVoteClass(scope.block.id) 的值发生变化， block 作用域属性也不会发生变化。有什么办法可以强制 block 范围重新评估其属性？

更新 2 - 问题已解决:在 CaioToOn 和 Gloopy 的帮助下 this question我意识到错误在于范围属性引用了原始字符串这一事实。为了克服这个问题，您可以观察一个函数，或者使用对对象属性的直接引用(而不是原始字符串)。

---

Controller :

    var gridController=['$scope', "userService", function($scope, userService) {

        $http.get(url).success(function(data) {
            $scope.blocks = data;
        });

        $scope.getLookVoteStatus = userService.getLookVoteStatus

    }];

指令:

.directive('gridBlock', function() {
        return {
            link: function(scope, element, attrs) {

                scope.voteClass=getVoteClass(scope.block.id);
                scope.$watch('voteClass',function(newValue, oldValue) {                                                
                    element.addClass(newValue);
                });

             }
        }
    });

Answer 1

voteClass 在第一次调用后没有改变，虽然 getVoteClass 的返回是，但它不会被再次调用。

为了不改变你的榜样，正确的做法是:

function checkForVoteClass() {
  return getVoteClass(scope.block.id);
}

scope.$watch(checkForVoteClass,function(newValue, oldValue) {                                                
  element.addClass(newValue);
})

但请记住，每次 $apply 在系统中的任何地方发生时，都会重新评估。

那么，什么时候 getVoteClass 会返回不同的值？关于用户交互？如果是，那么最好的方法应该是这样的:

<span ng-click="vote='bad'">Bad</span>
<span ng-click="vote='good'">Good</span>
<span id="thisIsYourElement" 
  ng-class="{bad: 'badCssClass', good: 'goodCssClass', 'undefined': 'noVoteClass'}[vote]"
  >Your content</span>

当然，它非常简单。