Question

在这里，我想根据指令范围的变化更新控制器范围值，但仅在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>

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("")
      };
    });

JSFiddle Link

请帮我更新此ngrepeat中指令的控制器值..

Answer 1

基本上问题是控制器内部的$scope.name与您在ng-repeat元素内传递给指令的方式不同，因为ng-repeat确实创建了一个原型继承的子范围在循环访问rawdata对象时从父作用域。

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

如果您想在$parent name之前使用$parent注释来解决此子级和父作用域相关问题，这将引用父作用域。

Plunkr使用指令中的$ parent

<强>缺点： -

但在某一点之后$parent.$parent.$parent.name会让你发疯。就像假设你有两个或三个子范围的层次结构一样，它会变得像name看起来非常糟糕。

在您的情况下，$parent具有原始数据类型，因此在创建子作用域时，父作用域的基本数据类型值在子作用域内不可访问。这就是您使用do annotation表示名称属于父作用域的原因。只需在声明对象时跟随<div class="directive" my-directive name="model.name"></div>即可克服此问题。这将帮助您通过遵循原型继承来使子范围内的父范围属性可用。

<强> HTML

$scope.model = {
    name: 'HappyNewYear2016'
};

<强>代码

name

Plunkr

您只需在run

ng-click="run(name)"

<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>

<强> HTML

$scope.run = function(name) {
    alert(name);
}

<强>代码

name

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

Working Plunkr

Answer 2

这完全是因为原型继承的工作原理，因为范围指令和控制器都具有相同的模型名称。 Child指令遮蔽控制器模型。

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

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

然后将其用作data.name来设置ng-repeat。它也会在父母身上反映出来。

ng-repeat内的指令twoway数据绑定不起作用

2 个答案: