Угловое директива несколько входов одна модель

HTML:Угловое директива несколько входов одна модель

<html ng-app="app"> 
<div class="container" style="margin-top: 30px"> 
    <input type="text" ng-model="newName" key-filter/> 
    <input type="text" ng-model="newName" key-filter/> 
    <input type="text" ng-model="newName" key-filter/> 
    <input type="text" ng-model="newName" key-filter/> 
</div> 
</html>

JS:

var app = angular.module('app', []); 
app.directive('keyFilter', function() { 
    var pattern = /([\s !$%^&*()_+|~=`{}\[\]:";'<>?,.\/])/; 
    function link(scope) { 
    scope.$watch('model', function() { 
     if(scope.model === undefined) 
     return 
     if(pattern.test(scope.model)) { 
     scope.model = scope.model.replace(pattern, ''); 
     Materialize.toast('Denied symbol', 4000, 'rounded'); 
     } 
    }); 
    } 
    return { 
    restrict: 'A', 
    scope: { 
     model: '=ngModel' 
    }, 
    link: link 
    } 
});

У меня есть много входов, которые связываются с одной и той же модели, и я фильтрации пользовательского ввода, когда пользователь нажимной отрицал ключ, я хотел показать тост, чтобы сообщить ему, что он не может использовать этот символ, но количество тостов равно количеству входов, привязанных к той же модели. Я думал, что работаю только с одной моделью.

Пример здесь: http://codepen.io/anon/pen/XbLjVY?editors=101

Как я могу исправить или изменить логику, как она работает

P.S. angular beginner

источник

2015-08-20 Octavian Lari

Если все они привязаны к одной и той же модели, каждое изменение в одном отправляется другим, поэтому просто поместите свою директиву на один вход не все из них.

Вот рабочая plunkr: http://plnkr.co/edit/dI5TMHms2wsPHc9Xqewf?p=preview

с помощью:

<input type="text" ng-model="newName" key-filter/> 
    <input type="text" ng-model="newName" /> 
    <input type="text" ng-model="newName" /> 
    <input type="text" ng-model="newName" />

Вы можете увидеть в консоли сообщение которое отображается только один раз и из любого поля ввода

источник

2015-08-20 09:10:55 ThibaudL

Ну, это хорошо но я все еще не могу его применить, потому что все входы генерируются ng-repeat, это сложная структура. –

уродливое исправление: добавьте скрытый ввод с директивой и позвольте всем остальным без. иначе, может быть, это не должно быть в директиве? и просто наблюдайте за своей моделью, чтобы добавить тост? – ThibaudL

Да, вы правы, я переключил $ watch с директивы на контроллер, и теперь он работает по назначению, большое спасибо! –

Угловое директива несколько входов одна модель

ответ

Смежные вопросы