Question

我有这个指令能够阻止textarea的字符。

restrict: 'E',
    scope:{
      contacts : "="
    },
    template:'<textarea ng-model="contacts" ng-list=","><textarea>',
    link: function(scope, element, attr, ngModel){
        scope.$watch('contacts', function(newValue, oldValue){
            var cut = newValue;
            if(newValue.length>0)
                var cut = newValue[newValue.length-1].replace(/\n|a|b|c/g, "");
            scope.contacts[scope.contacts.length-1] = cut;
        });
    }


<email-textarea contacts="contacts"></email-textarea>

请参阅此fiddle

如果我开始输入，则范围内的联系人会忽略我设置的字符。但textarea似乎没有更新其文本。我该如何更新textarea？

Answer 1

问题是ng-list不会监视集合的内容（由于某种原因，似乎没有办法在不更改源的情况下执行此操作）。因此，一种可能的方法是在您自己的代码中监视它：

scope.$watchCollection('contacts', function(newContacts){
  if (newContacts) {
    scope.contacts = newContacts.map(function(rec){
      return rec.replace(/[\nabc]/g, '');
    });
  }
});

Demo。我在这里使用watchCollection，因为如果contacts数组的内容已经改变，那么应该只激活观察者 - 每次处理程序触发时都会交换数组。

替代方案仍然是使用watch，但只有在因为无效字符而更改数组时才更改数组：

scope.$watch('contacts', function (newContacts) {
    var fixedContacts, shouldBeReplaced;
    if (newContacts) {
        fixedContacts = newContacts.map(function(rec) {
            var newRec = rec.replace(/[\nabc]/g, '');
            if (newRec !== rec) {
                shouldBeReplaced = true;
            }
            return newRec;
        });
        if (shouldBeReplaced) {
            scope.contacts = fixedContacts;
        }
    }
});

Demo。

请注意，在这两种情况下都必须监视整个列表：您无法保证用户不会返回列表的开头并开始在那里（或文本的任何部分）进行更改。这就是为什么只检查最后一个元素不够好。

AngularJS textarea不会更新

1 个答案: