У меня проблемы с пониманием угловых указаний. Я хотел бы использовать простой атрибут для расширения в более сложный html, но некоторые части этого шаблона могут быть заменены с помощью параметров.
Учитывая этот код:
<form role="form" name="databaseForm">
<input type="text" name="connectionName"
ng-focus="databaseForm.connectionName.$focused = true;databaseForm.connectionName.$blurred = false;"
ng-blur="databaseForm.connectionName.$blurred = true;databaseForm.connectionName.$focused = false;"
>
</form>
Я хотел бы написать его, используя более краткую директиву (например, "размытую"):
<form role="form" name="databaseForm">
<input type="text" name="connectionName"
blurred-focused="'databaseForm.connectionName'"
>
</form>
Поэтому это означает, что я могу очень легко повторно использовать его для других входов:
<form role="form" name="databaseForm">
<input type="text" name="username"
blurred-focused="'databaseForm.username'"
>
</form>
Ожидаемый результат от этого заключается в том, что входы с этой директивой будут иметь автоматически размытые и $ сфокусированные свойства, основанные на взаимодействии пользователя со входом.
Спасибо.
Обновление: я закончил использование версии MMHunter, где область неизолирована. Я добавил некоторую логику, чтобы автоматически найти объект формы и поля, так что мне не нужно было все это указывать.
Моя директива:
(function () {
"use strict";
angular
.module("app.shared.widgets")
.directive("blurredFocused", blurredFocused);
blurredFocused.$inject = ["_"];
/* @ngInject */
function blurredFocused(_) {
return {
restrict: "A",
priority: -1,
link: function(scope, element, attributes) {
element.on("blur", function () {
var formFieldName = element[0].form.name + "." + element[0].name;
var target = _.get(scope, formFieldName);
scope.$apply(function() {
target.$blurred = true;
target.$focused = false;
});
});
element.on("focus", function () {
var formFieldName = element[0].form.name + "." + element[0].name;
var target = _.get(scope, formFieldName);
scope.$apply(function() {
target.$blurred = false;
target.$focused = true;
});
});
}
};
}
})();
И пример его использования:
<form role="form" name="databaseForm">
<input type="text" name="connectionName" blurred-focused>
</form>
Вам не трудно добиться с помощью угловой директивы. Но все зависит от того, используется ли изолированная область.
В изолированном объеме следующий код является прямым. Связывание значения с изолированной областью в директиве "размытые фокусы" и прослушивание событий.
//with isolated scope
app.directive("blurredFocused", [function () {
return {
restrict:"A",
priority:-1,
scope:{
blurredFocused:"="
},
link:function(scope,ele,attrs){
ele.on("blur",function(){
scope.$apply(function(){
scope.blurredFocused.$blurred = true;
scope.blurredFocused.$focused = false;
})
})
ele.on("focus",function(){
scope.$apply(function(){
scope.blurredFocused.$blurred = false;
scope.blurredFocused.$focused = true;
})
})
}
}
}]);
Но без изолированного масштаба все может быть немного сложнее. нам нужно найти значение области вручную по значению атрибутов.
//without isolated scope
app.directive("blurredFocused", [function () {
return {
restrict:"A",
priority:-1,
link:function(scope,ele,attrs){
ele.on("blur",function(){
var targetField = scope[attrs.blurredFocused];
scope.$apply(function(){
targetField.$blurred = true;
targetField.$focused = false;
})
})
ele.on("focus",function(){
var targetField = scope[attrs.blurredFocused];
scope.$apply(function(){
targetField.$blurred = false;
targetField.$focused = true;
})
})
}
}
}]);
Вот плункер
Я бы порекомендовал вам использовать тот, который не имеет изолированного объема. Директивы атрибутов всегда используются вместе, поэтому может быть неплохо иметь изолированные области.