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

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

更新：我转换了＆＃39; stuff＆＃39;到一个对象数组，现在它可以工作：

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

Answer 2

@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;
  }

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

2 个答案: