Question

我几天来一直在努力解决这个问题。

问题是我的角度指令正在搞乱我的数据模型。

为简单起见，我在这里创建了一个简单的例子：http://jsfiddle.net/hanspc/xxy4vh3v/

angular.module('vt.directives', [])
    .directive('personType', [function () {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            personType: '@'
        },
        template: '<div class="{{pClass}}" style="height: 80px; width: 200px">Class: {{pClass}}<br>Type: {{personType}}</div>',
        link: function (scope, elm, attrs) {
            console.log(scope.personType);
            scope.pClass = scope.personType == 'male' ? 'male-class' : 'female-class';
        }
    };
}]);

当我点击其中一个添加按钮时，它会向数据模型添加一个人。问题是指令没有使用正确的数据值。如果您点击＆＃39;添加安妮＆＃39;，数据看起来正确＆＃34;外部＆＃34;指令，但不是＆＃34;内部＆＃34;。它应该根据数据返回正确的类名（和颜色），但添加的女性显示为蓝色（男性）。

无论您点击多少或哪个按钮，前两个按钮都是蓝色。其余的都是红色的。

有什么想法吗？

由于

Answer 1

您正在使用错误跟踪，因为您使用的是非移位，并且元素的实际索引位置正在发生变化。尝试为插入到数组中的每个对象添加一个唯一ID，然后通过它进行跟踪。

http://jsfiddle.net/kku170cm/

以下是有效的曲目：

<div style="float: left; height: 140px; width: 200px; border: 1px solid #cccccc; margin-bottom: 20px;" ng-repeat="p in data.persons">

Angular指令中的数据混乱

1 个答案: