AngularJS指令中的视图更新问题

Question

我在我的应用程序中使用以下指令来“添加标记”功能：

directives.addTag = function ($http) {
    return {
        link: function (scope, element, attrs) {
            element.bind('keypress', function (event) {
                if (event.keyCode == 13) { /*If enter key pressed*/

                    if (!scope.$parent.post) { //For KShare
                        var newTagId = "tagToNote";

                    }
                    else { //For KB
                        var newTagId = "tagToAddFor" + scope.post.meta.id;
                    }
                    var tagValue = element[0].value;

                    if (tagValue == "")
                        return;

                    if (!scope.$parent.post) {
                        scope.$parent.tags.push(tagValue);
                        scope.addTagButtonClicked = false;
                    }
                    else {
                        scope.post.tags.push(tagValue);
                        scope.addTagButtonClicked = false;
                    }
                    scope.$apply();

                    element[0].value = "";
                }
            });
        }
    }
}

这是用于呈现标记的HTML代码：

<div class="tagAdditionSpan" ng-repeat="tag in post.tags" ng-mouseenter="hover = true" ng-mouseleave="hover = false">
            <span>{{tag}}</span>
            <span class="deleteIconSpan" ng-class="{deleteTagIcon: hover}"  ng-click="$parent.deleteTag($index,$parent.$index);"></span>
</div>

当用户在其中键入标记的名称并按“Enter”键时，我有一个文本框来添加标记。在页面加载时，我将1个标记静态填充到“tags”数组中。

我甚至可以使用标签添加标签，它会反映在视图中。但是，在添加2个或3个标记后，它会启动行为不正常，并且不再使用添加的标记更新视图。

我试过调试它，发现它在'scope.post.tags'数组中被更新，但没有反映在视图中。

我做错了什么？

Answer 1

根据收到的意见，我能够解决问题。 'ng-repeat'用于在添加重复标签时中断循环，因此视图未相应更新。

这解决了问题（在ng-repeat中添加了'track by'）：

<div class="tagAdditionSpan" ng-repeat="tag in post.tags track by $index" ng-mouseenter="hover = true" ng-mouseleave="hover = false">
            <span>{{tag}}</span>
            <span class="deleteIconSpan" ng-class="{deleteTagIcon: hover}"  ng-click="$parent.deleteTag($index,$parent.$index);"></span>
</div>