ng-blurとng-focusを使用するための角ディレクティブ

Question

角ディレクティブの理解に問題があります。単純な属性を使用してより複雑なhtmlに拡張したいが、このテンプレートのいくつかの部分はパラメータで置き換え可能である。

このコードを考える：だから、私は非常にできることを意味します

<form role="form" name="databaseForm"> 
    <input type="text" name="connectionName" 
      blurred-focused="'databaseForm.connectionName'" 
      > 
</form> 

：私は（例えば、「ぼやけ-集中」など）、より簡潔なディレクティブを使用して、それを書きたいと思い

<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="username" 
      blurred-focused="'databaseForm.username'" 
      > 
</form> 

この結果、この指令の入力は入力とのユーザーのやりとりに基づいて、$ blurredプロパティと$ focusedプロパティが自動的に適用されます。

ありがとうございます。

---

更新： 私は、スコープは非絶縁です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です。 'blurred-focused'ディレクティブで隔離されたスコープに値をバインドし、イベントを聞きます。

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

は、私はあなたが孤立せずにスコープ1を使用することをお勧めしますplunker

です。属性ディレクティブは常に一緒に使用されるため、独立したスコープを持つことはお勧めできません。