2016-07-27 3 views
2

Я пытаюсь обновить значения в ng-repeat на ng-модели;AngularJS обновление 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

кто-нибудь знает, что может быть не так?

ответ

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

Euhm, извините, по-видимому забыл сохранить, но проблему ISN 't показывает входы, он обновляет значения, на вашем примере эта проблема существует, а – Kiwi

+0

обновил ответ, не могли бы вы проверить? – kukkuz

+0

Действительно, что работает, странно:/ – Kiwi

0

@Kiwi ng-repeat создает дочернюю область, а ng-модель будет использовать свойство в области child, поскольку привязка 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; 
    }