Javascript 将ng repeat与指令一起使用会导致子指令不更新

如果在angular.js中发现这个非常有趣的bug。如果在ng repeat中有一个自定义指令，该指令正在积极更改指令中的变量，则不要更新。这意味着，如果我在数组中有3个元素用于ng repeat，它会很好地初始化，但是如果我从数组中删除元素1，那么元素1传递给其子指令的任何变量都会以某种方式在元素2的子指令中结束。这里是我的示例代码

<div ng-app='testing'>
    <div ng-controller='testing as test'>
        <div ng-repeat='item in test.example track by $index'>
            {{item.title}}
            <child scope='item.data'></child>
            <button ng-click="test.delete($index)">
               Delete
            </button>
        </div>
    </div>
</div>

{{item.title}
删除

然后在我的js文件中

console.log('hello world');
var app=angular.module('testing',['testingChild']);
app.controller('testing',[function(){
    this.example=[{
        title:"this is the first title",
        data:"this is the first index"
    },{
        title:"this is the second title",
        data:"this is the second index"
    },{
        title:"this is the third title",
        data:"this is the third index"
    }];
    this.delete=function(index){
        this.example.splice(index,1);
    };
}]);
var child=angular.module('testingChild',[]);
child.directive('child',[function(){
    return{
        restrict:"E",
        scope:{
            parent:"=scope"
        },
        template:"<div>{{child.parent}}</div>",
        controller:['$scope',function($scope){
            this.parent=$scope.parent;
        }],
        controllerAs:"child"
    };
}]);

console.log（'helloworld'）；
var app=angular.module（'testing'，['testingChild']）；
应用程序控制器（'测试'，[功能（）{
这个例子=[{
标题：“这是第一个标题”，
数据：“这是第一个索引”
},{
标题：“这是第二个标题”，
数据：“这是第二个索引”
},{
标题：“这是第三个标题”，
数据：“这是第三个指数”
}];
this.delete=函数（索引）{
本例为拼接（索引1）；
};
}]);
var child=angular.module（'testingChild'，[]）；
指令（'child'，[function（）{
返回{
限制：“E”，
范围：{
父项：“=范围”
},
模板：“{child.parent}}”，
控制器：['$scope'，函数（$scope）{
this.parent=$scope.parent；
}],
controllerAs：“孩子”
};
}]);

我有一个正常的身体。要想让它正常工作，您所要做的就是删除第一个元素之一。有人知道这是什么原因，以及如何修复吗

旁注：

我认为还应该提到，当在与子元素（如文本框）中的可编辑元素稍有不同的情况下使用此功能时，数据绑定可以从子元素到父元素。因此，将附加到控制器的变量分配给父对象的作用域变量就是朝着这个方向工作的。这似乎是我遇到的唯一一种情况，从父母到孩子，这是不起作用的

变化：

template:"<div>{{child.parent}}</div>",
controller:['$scope',function($scope){ this.parent=$scope.parent; }]

模板：“{{child.parent}}”，
控制器：['$scope'，函数（$scope）{this.parent=$scope.parent；}]

致：

模板：“{{parent}”
控制器：函数（）{}

因为您使用的是controllerAs语法，所以不需要$scope注入。

---

对于预期的绑定工作，您不使用child.parent，只使用parent（或者您在控制器的这个上下文中注入的任何内容

我在$compile服务中找到了一个属性，该属性修复了这个问题。将属性

bindToController:true

添加到指令中会获取您的scope属性中定义的所有变量，并将它们附加到控制器，而不是作用域本身意味着2 way数据绑定到控制器上的变量，而不是作用域上的变量

在指令定义中

scope:{
    parent:"=scope"
},
bindToController:true,

然后在控制器中删除

this.parent=$scope.parent

---

这是一个

如果你格式化你的代码，你很可能会得到一个答案。这正是我给它起的名字，因为它包含的指令是我描述的情况下的父项的子项。在我的非简化代码中，它们是在单独的文件中，所以每个文件都需要自己的模块。为什么第一种方法不起作用呢理论上应该更新。因为出于其他原因，将数据附加到控制器是有用的。我甚至不确定，如果只是一个范围问题，为什么元素1中的变量首先被传递到元素2是有意义的。是的，第一种方法应该行得通，但是你看，在指令中使用controllerAs是有意义的帐篷。github（）中有一个bug报告。它已关闭，但我不认为它已被修复。正如我在我这边添加的，虽然我没有从孩子到家长的数据绑定工作，但只是从家长到孩子的数据绑定似乎不起作用

scope:{
    parent:"=scope"
},
bindToController:true,