2

我有一个渲染 gridBlocks 的中继器。这些块中的每一个都具有“Vote Good”、“Vote Bad”或“No vote” （出于我们的目的）的属性。除其他外，该属性控制块的 CSS 类。

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

我的问题是这样的：

我voteClass通过调用userService. 我想查看此属性并在其模型更改时相应地更新 UI。

但是，这似乎不起作用-即使值确实发生了变化，voteClass也不会重新评估并且不会调用。$watchgetVoteClass(scope.block.id)

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

非常感谢您的意见...

Update1：我认为即使getVoteClass(scope.block.id)更改的值，块范围属性也不会。有没有办法强制块范围重新评估其属性？

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

控制器：

    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);
                });

             }
        }
    });
4

1 回答 1

2

is 在第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>

当然，它非常简化。

于 2013-04-03T13:47:42.977 回答