Javascript ng repeat内部的指令双向数据绑定不起作用

在这里，我想根据指令范围的变化更新控制器范围值，但其仅在ng repeat外部工作，且不在ng repeat内部工作。

HTML

<div ng-app="app">

  <div ng-controller="MainCtrl">
    <div>
      <h3>
    outside repeat
    </h3>
      <br> Name <strong>{{name}}</strong>
      <div class="directive" my-directive name="name"></div>
      <button ng-click="run()">See changes</button>

      <br>
      <br>
      <h3>
    Inside repeat
    </h3>
      <br>
      <div ng-repeat="(k,v) in rawdata">
        {{k}} {{v.key}} Name <strong>{{name}}</strong>
        <div class="directive" my-directive name="name"></div>
        <button ng-click="run()">See changes</button>
        <br>
      </div>
    </div>
  </div>

<div class="directive" my-directive name="model.name"></div>

外部重复

Name{{Name}}
看到变化了吗




内重复


{{k}{{v.key}}Name{{Name}
看到变化了吗

JS

var app = angular.module("app", []);

    app.controller("MainCtrl", function($scope) {
      $scope.name = "HappyNewYear2016";
      $scope.run = function() {
        alert($scope.name);
      }

      $scope.rawdata = [{
        key: "event1",
      }, {
        key: "event2",
      }];

    });

    app.directive("myDirective", function() {

      return {
        restrict: "EA",
        scope: {
          name: "="
        },
        template: [
          "<div>",
          "Name : <strong>{{name}}</strong>;  Change name:<input type='text' ng-model='name' /><br/>",
        ].join("")
      };
    });

var-app=angular.module（“app”，[]）；
应用程序控制器（“MainCtrl”，函数（$scope）{
$scope.name=“HappyNewYear2016”；
$scope.run=函数（）{
警报（$scope.name）；
}
$scope.rawdata=[{
关键：“事件1”，
}, {
关键：“事件2”，
}];
});
app.directive（“myDirective”，function（））{
返回{
限制：“EA”，
范围：{
名称：“=”
},
模板：[
"",
“名称：{{Name}}；更改名称：
”，
].join（“”）
};
});

---

请帮助我更新此ngrepeat内指令的控制器值。

基本上问题在于

$scope。控制器内的name

与您传递给

ng repeat

元素内指令的名称不同，因为

ng repeat

确实创建了一个子范围，该子范围在循环通过

rawdata

对象时通常从父范围继承

---

有几种方法可以解决这个问题

如果您想通过在

名称

之前使用

$parent

注释来解决与子范围和父范围相关的问题，该注释将引用父范围

指令中有$parent

缺点：-

但是在某一点之后，

$parent

会让你发疯。假设您有两个或三个层次结构的子作用域，它将变得像

$parent.$parent.$parent.name

，看起来非常复杂

---

在您的情况下，

name

属于基本数据类型，因此在创建子范围时，父范围的基本数据类型值在子范围内不可访问。这就是为什么要使用

$parent

来指示名称属于父范围。只要在声明对象时遵循

do annotation

，就可以克服这个问题。这将帮助您通过遵循原型继承使父范围属性在子范围内可用

HTML

<div ng-app="app">

  <div ng-controller="MainCtrl">
    <div>
      <h3>
    outside repeat
    </h3>
      <br> Name <strong>{{name}}</strong>
      <div class="directive" my-directive name="name"></div>
      <button ng-click="run()">See changes</button>

      <br>
      <br>
      <h3>
    Inside repeat
    </h3>
      <br>
      <div ng-repeat="(k,v) in rawdata">
        {{k}} {{v.key}} Name <strong>{{name}}</strong>
        <div class="directive" my-directive name="name"></div>
        <button ng-click="run()">See changes</button>
        <br>
      </div>
    </div>
  </div>

<div class="directive" my-directive name="model.name"></div>

带点符号

---

您只需从

ng click=“run（name）”

Html

<div ng-repeat="(k,v) in rawdata">
    {{k}} {{v.key}} Name <strong>{{name}}</strong>
    <div class="directive" my-directive name="name"></div>
    <button ng-click="run(name)">See changes</button>
    <br>
</div>

---

您可以在使用别名声明控制器时使用controllerAs语法，并通过别名传递控制器

name

属性

---

这都是因为原型继承是如何工作的，因为scopes指令和controller对model都有相同的名称。子指令对控制器模型进行阴影处理

不要将控制器模型直接存储为变量，而是将其与对象一起使用

$scope.data = {
  name : 'HappyNewYear2016'
}

---

然后将其用作

数据。name

在ng repeat中设置。这也会反映在家长身上。

非常感谢@Pankaj。。做注释可以解决我的问题……：）：）再次感谢您的解释和工作经验。很高兴能帮助您。谢谢：）谢谢@Diljohn7541…：）