Question

所以我创建了一个Angular指令，可以将输入绑定到字符串数组。但每当我尝试以编程方式从数组中删除项目时，模型不会反映在输入字段上。似乎$ modelValue也没有更新。有人可以解释为什么角度有这样的表现吗？

  <input array-model ng-model="inputList">
  <button type="button" ng-click="removeLastItem()">
    Remove last element from the list
  </button>


$scope.removeLastItem = function() {
  $scope.inputList.pop();
};

请参阅此处的小提琴：http://jsfiddle.net/r19mbv1r/

Answer 1

似乎pop的函数不会触发已更改事件的数组。

显然，$格式化程序的工作原则是$watch而不是$WatchCollection。

我们可以解决这个问题。每次删除数组元素以产生其初始化。

jsfiddle上的实例。

angular.module('SomeApp', [])
  .controller('SomeAppController', function($scope) {
    $scope.inputList = [];
    $scope.removeLastItem = function() {
      $scope.inputList = $scope.inputList.slice(0,$scope.inputList.length-1);
    };
  })
  .directive('arrayModel', function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, iElement, iAttrs, ngModel) {

        ngModel.$formatters.push(function(modelValue) {
          console.log("Inside formatters!",modelValue);
          return modelValue.join(',');
        });

        ngModel.$parsers.push(function(viewValue) {
          console.log("Inisde parsers",viewValue);
          return viewValue.split(',');
        });
				
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="SomeApp" ng-controller="SomeAppController" class="container">
  <h4>
    Input a comma separated string
    </h4>
  <input array-model ng-model="inputList">
  <br/> Input List is :{{inputList}}.
  <br/>
  <button type="button" ng-click="removeLastItem()">
    Remove last element from the list
  </button>
</div>

输入字段在ngModel更改时未更新

1 个答案: