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

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

UPDATE：私は、オブジェクトの配列に 'もの' を変換し、今では動作します：

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は子スコープのプロパティを使用します。これは、ng-repeatディレクティブで作成された子スコープのプロパティにバインドされているため、ビュー内に表示されているjsonがサンプル内で変更されない理由です。

これを確認してください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; 
    }