Играться в AngularJS начал не так давно и создать на нем что-то настоящее только собираюсь.
Сегодня, вопрос на Тостере о директивах, указал на пробел, который я так и не смог закрыть.
Можно долго объяснять о чем именно я спрашиваю и по этому лучше покажу -
<ng-custom-input remove-char="s"></ng-custom-input>
Возможно ли создать "что-то" настолько автономное, чтобы написав код выше,
на странице появлялся input, который бы удалял при вводе все указанные символы?
Мне немного объяснили как создать с использованием модели, но этот способ обязывает
записывать в теге директивы ещё и модель, а где модель там и контроллер. Так и теряется
шарм компонента.. Хотя бы на словах.
**UPD:**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
</head>
<body ng-app="app">
<script>
var app = angular.module('app', []);
app.controller('InputRemoveCharController', ['$scope', function($scope){
this.model = {
value: ''
};
}]);
app.directive('inputDirective', ['$injector', function(){
return {
require: '?ngModel' ,
link: function($scope, iElm, iAttrs, model) {
if(!model){
return;
}
var charForRemove = iAttrs.char;
model.$setViewValue = function(value){
if(value.indexOf(charForRemove) > -1){
value = value.replace('s', '');
model.$setViewValue(value);
model.$render();
}
};
}
};
}]);
</script>
<div ng-controller="InputRemoveCharController as inputRemoveCharController">
<input type="text" input-directive char="s" ng-model="inputRemoveCharController.model.value">
</div>
</body>
</html>
***UPD: 2***
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
</head>
<body ng-app="app">
<script>
var app = angular.module('app', []);
app.controller('InputRemoveCharController', ['$scope', function($scope){
this.model = {
value: ''
};
}]);
app.directive('inputDirective', ['$injector', function(){
return {
require: '?ngModel' ,
link: function($scope, iElm, iAttrs, model) {
if(!model){
return;
}
var charForRemove = iAttrs.char;
model.$parsers.push(removeChar);
function removeChar(string){
if(string.indexOf(charForRemove) > -1){
string = string.replace(charForRemove, '');
model.$setViewValue(string);
model.$render();
}
}
}
};
}]);
</script>
<div ng-controller="InputRemoveCharController as inputRemoveCharController">
<input type="text" input-directive char="s" ng-model="inputRemoveCharController.model.value">
</div>
</body>
</html>
Средний
Средний