ng-repeat 中的 Angularjs 指令不更新外部控制器数据答案

【问题标题】：Angularjs directive within ng-repeat not updating outside controller datang-repeat 中的 Angularjs 指令不更新外部控制器数据
【发布时间】：2016-08-29 12:23:44
【问题描述】：

我在ng-repeat 中使用了一个隔离范围指令，它从该模板的控制器迭代一个数组。模板如下：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <script src="angular.min.js"></script>
    <script src="script1.js"></script>
  </head>

  <body ng-app="AddNewTest" ng-controller="AddNewController">
    <div class="items" ng-repeat="row in rows">
      <add-new-row data="row" index="$index"></add-new-row>
    </div>
  </body>

</html>

指令定义如下：

angular.module('AddNewTest', []).
directive('addNewRow', function ($timeout) {
  return {
    controller: 'AddNewController',
    link: function (scope, element, attribute) {
      element.on('keyup', function(event){
        if(scope.index + 1 == scope.rows.length) {
          console.log('keyup happening');
          $timeout(function () {
            scope.rows.push({ value: '' });
            scope.$apply();
          });
        }
      })
    },
    restrict: 'E',
    replace: true,
    scope: {
      index: '='
    },
    template: '<div class="add-new"><input type="text" placeholder="{{index}}" ng-model="value" /></div>'
  }
}).
controller('AddNewController', function ($scope, $timeout) {
  $scope.rows = [
    { value: '' }
  ];
});

但即使在添加新行并执行$apply() 之后，ng-repeat 也不会呈现添加的新数据。请帮忙。

Plnkr Link Here

【问题讨论】：

指令中有隔离范围。在指令中传递rows 的数组。像这样scope: { index: '=', rows:"=" }。不要在控制器AddNewController 中创建行。删除$scope.rows = [ { value: '' } ]。
您希望它如何工作？每个值的输入？只有 1 个输入用于推入数组？你期待什么结果？
@gyc 我想在最后一行的 keyup 事件上添加新行。

标签： javascript angularjs angularjs-directive angularjs-ng-repeat isolate-scope

【解决方案1】：

将行数组传递给指令如下：-

 scope: {
  index: '=',
  rows :'='
},

<add-new-row rows="rows"  index="$index"></add-new-row>

Working plunker

【讨论】：

感谢您的帮助。从指令定义中删除控制器有助于在行更新时更新 ng-repeat。

【解决方案2】：

每个 ng-repeat 都会创建一个隔离范围，而不是您在指令中声明一个与 div 具有相同控制器的隔离范围。你在 $scope 汤里游泳 :)

我会用自己的控制器亲自制定一个干净且独立的指令。

angular.module('AddNewTest', []).
directive('addNewRow', function () {
  return {
    restrict: 'E',
    controller: MyController,
    controllerAs: '$ctrl',
    template: '{{$ctrl.rows.length}}<div class="add-new"><pre>{{$ctrl.rows | json}}</pre><input type="text" placeholder="0" ng-model="value" /></div>'
  }
}).
controller('MyController', MyController);

function MyController($scope) {
  var vm = this;
  this.rows = [ { value: '' } ];

   $scope.$watch("value",function(value){
     if(value)
      vm.rows.push({ value: value });
   });
}

http://plnkr.co/edit/AvjXWWKMz0RKSwvYNt6a?p=preview

当然，您仍然可以使用bindToController（而不是范围：{}）将一些数据绑定到指令，如果您需要 ng-repeat，请直接在指令模板中进行。

【讨论】：

是的。我的错。我为我创建的每个指令使用单独的控制器。但是这一次我搞砸了试图重用与全局模板相同的内容。