檢測對自定義指令的關注

Question

我嘗試在官方的angularjs文檔上查看它，但它們沒有提供關於元素事件的解釋-------- HTML ---------------

<my-input-container>
 <input />
</my-input-container>

<my-input-container>
 <select>*****</select>
</my-input-container>

----------- JS -----------------

mymodule.directive("my-input-container",function(){
   //****
   //when <my-input-container> is focused or any elements inside it is
   //i will add a class="my-input-focused"
   //when it loses focus,I shall remove the class="my-input-focused"
   //***
});

Answer 1

你應該將focus事件綁定到指令。

 mymodule.directive("my-input-container",function(){
    return {
    link: function(scope, element, attrs)
    {
        element.bind('focus', function(){});
    }
    }
 });

Answer 2

 mymodule.directive("my-input-container",function(){
    return {
      link: function(scope, element, attrs) {
        // Focus
        element.bind('focus', function(){
          // Add class
        });
        // Lost focus
        element.bind('blur', function(){
          // Remove class
        });
      }
   }
 });

對於此指令中的輸入值：

mymodule.directive("my-input-container",function(){
    return {
      scope: {
        inputValue: '=',
      },
      templateUrl: 'template.html',
      link: function(scope, element, attrs) {
        // Focus
        element.bind('focus', function(){
          // Add class
        });
        // Lost focus
        element.bind('blur', function(){
          // Remove class
        });
      }
   }
 });

template.html ：

// something
  <input ng-model="inputValue" name=""/>
// something

視圖：

<my-input-container input-value="inputValue">
  // Something
</my-input-container>

來自控制器的inputValue變量。