Угловая директива по использованию ng-blur и ng-focus

Question

У меня возникли проблемы с пониманием угловых указаний. Я хотел бы использовать простой атрибут для расширения в более сложный 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> 

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

спасибо.

---

Update: Я закончил с использованием версии 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> 

Answer 1

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

С изолированной областью, следующий код straightForward. Связывание значения с изолированной областью в директиве «размытые фокусы» и прослушивание событий.

//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; 
       }) 
      }) 
     } 
    } 
}]); 

Вот plunker

Я бы порекомендовал вам использовать один без изолированного объема. Директивы атрибутов всегда используются вместе, поэтому может быть неплохо иметь изолированные области.