Angular指令使用ng-blur和ng-focus

Question

我無法理解Angular指令。我想用一個簡單的屬性來擴展到更復雜的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> 

預期的結果是，帶有此指令的輸入將具有基於用戶與輸入的交互，自動應用$ blur和$ 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。將價值綁定在「模糊聚焦」指令中的孤立範圍，並聽取事件。

//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

我會建議你使用無隔離範圍之一。屬性指令總是一起使用，所以它可能不是一個好主意，有孤立的範圍。