Question

我希望实现一个指令，当某个{{valueFromServer}}更改时，该指令会更改视图中的某些HTML颜色。目前，我已经尝试了以下方法：

查看：

<span class="glyphicon glyphicon-thumbs-up voteColorer" ng-click="upvote(post)" votes="{{valueFromServer}}"></span>
<span class="glyphicon glyphicon-thumbs-down voteColorer" ng-click="downvote(post)" votes="{{valueFromServer}}"></span>

指令：

app.directive('voteColorer', function () {
    return {
    restrict : 'C',
        link: function(scope, elem, attrs) {
            elem.bind("click" , function(e){

                 attrs.$observe('votes', function() {
                    console.log(elem); // for testing purposes
                    // would like to do color change operations here
                 });                 
            });     
        }
    }
});

当我点击任何一个glyphicon跨度和valueFromServer更改时，我期望该指令将我刚刚点击的span元素登录到控制台。

实际的作用是首先记录我点击的范围。在我第二次单击时，它会记录我单击的跨度和我之前单击的跨度。在我第三次点击时，它会记录我刚刚点击的范围，我之前点击的范围以及我之前点击的范围等等。我第五次点击该指令打印出五个console.log元素。

为什么会这样做？如何摆脱这种行为？

为什么我的Angular指令的行为如下？

0 个答案: