Question

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

Answer 1

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

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

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

Working plunker

Answer 2

每个ng-repeat创建一个独立的范围，而不是在指令中声明一个与div具有相同控制器的隔离范围。你在$ scope汤中游泳：）

我个人会用自己的控制器制作一个干净，独立的指令。

#include <iostream>
using namespace std;

void add(int a, int b);

int main()
{
     add(3,4);
}

void add(int c, int d){
    int e = c + d;
    cout << e << endl;
}

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

当然，您仍然可以使用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 }); }); }（而不是范围：{}）将某些数据绑定到指令，如果需要ng-repeat，请直接在指令模板中执行。

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

2 个答案: