AngularJS 通过输入更新 ng-repeat 不起作用？

Question

我正在尝试更新 ng-model 上的 ng-repeat 中的值；

我有当前指令：

app.directive('myDirective', function () {
  return {
    require: 'ngModel',
    restrict: 'E',
    template: '<div ng-repeat="e in model"><input ng-model="e"/></div>',
    scope: { 
      ngModel: '='
    },
    link: function($scope, elem, attrs, ngModelCtrl) {
      $scope.$watch(function (){
          return ngModelCtrl.$modelValue; 
      }, function (v) {
          $scope.model = ngModelCtrl.$viewValue;
      });
    }
  };
});

但它并未更新值，如下所示： http://plnkr.co/edit/E89sbXY0gUw53EmJobz0?p=preview

有人知道哪里出了问题吗？

Answer 1

@Kiwi ng-repeat 创建一个子作用域，而 ng-model 将在子作用域上使用属性，因为 ng-model 绑定将在当前作用域上进行评估。这就是为什么视图中显示的 json 在您的示例中没有改变的原因，因为它绑定到 ng-repeat 指令创建的子范围上的属性。

勾选这个simple jsfiddle example希望对你有所帮助

<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    {{ctrl.numbers | json}}    
    <numbers numbers="ctrl.numbers"></numbers>
  </div>
</div>


angular
  .module('demo', [])
  .controller('DefaultController', DefaultController)
  .controller('NumbersController', NumbersController)
  .directive('numbers', numbers);

  function DefaultController() {
    var vm = this;
    vm.numbers = [1, 2, 3];
  }

  function numbers()
  {
    var directive = {
      restrict: 'E',
      scope: {
        numbers: '='
      },
      template: '<div ng-repeat="number in vm.numbers"><input type="number" ng-model="vm.numbers[$index]"/></div>',
      bindToController: true,
      controller: NumbersController,
      controllerAs: 'vm'
    };

    return directive;
  }

  function NumbersController() {
    var vm = this;
  }

Answer 2

http://plnkr.co/edit/2JwxNzBRQa1dzACoJIpF?p=preview

必须将 $scope.model = ngModelCtrl.$viewValue; 替换为 scope.model = ngModelCtrl.$viewValue; 并且效果很好。

app.directive('myDirective', function () {
  return {
    require: 'ngModel',
    restrict: 'E',
    template: '<div ng-repeat="e in model"><input ng-model="e"/></div>',
    scope: { 
      ngModel: '='
    },
    link: function(scope, elem, attrs, ngModelCtrl) {
      console.debug()
      scope.$watch(function (){
          return ngModelCtrl.$modelValue; 
      }, function (v) {
          scope.model = ngModelCtrl.$viewValue;
      })
    }
  };
});

更新：我将 'stuff' 转换为一个对象数组，现在它可以工作了：

http://plnkr.co/edit/2JwxNzBRQa1dzACoJIpF?p=preview

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.stuff = [{number: 1},{number: 2},{number: 3}];
});

app.directive('myDirective', function () {
  return {
    require: 'ngModel',
    restrict: 'E',
    template: '<div ng-repeat="e in model"><input ng-model="e.number"/></div>',
    scope: { 
      ngModel: '='
    },
    link: function(scope, elem, attrs, ngModelCtrl) {
      console.debug()
      scope.$watch(function (){
          return ngModelCtrl.$modelValue; 
      }, function (v) {
          scope.model = ngModelCtrl.$viewValue;
          console.log(scope.model)
      })
    }
  };
});

AngularJS 通过输入更新 ng-repeat 不起作用？

AngularJS updating ng-repeat via input not working?

javascript

angularjs

angular-directive