AngularJS通過輸入無法正常更新ng-repeat？

Question

我試圖在ng模型中更新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; 
     }) 
    } 
    }; 
}); 

更新：我轉換 '東西' 給對象的數組，現在，它的工作原理：

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