Makoto Lavan Makoto Lavan - 6 months ago 16
AngularJS Question

Detecting focus on a custom directive

I tried looking on this on the official angularjs documentation but they offer no explantions on elemental events
--------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
 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
        });
      }
   }
 });

For value of input in this directive:

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

View:

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

inputValue variable from your controller.