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变量。

检测对自定义指令的关注

2 个答案: