Многоразовая угловая директива для установки фокуса на элементы ввода

Question

Я новичок в угловой, и я пытаюсь написать директиву многократного использования, чтобы установить фокус на элементы внутри некоторого родителя.

<div class="products" ng-controller="productsController" id="products" > 
    Name 
    <input type="text" ng-model="name" tabindex="1" focus-element /> 
    Price 
    <input type="text" ng-model="price" tabindex="2" focus-element /> 
</div> 

.directive('focusElement', function() {  
    return { 
     restrict: 'A', 
     link: function($scope, $element, attrs) { 
      var fE = function() { 
       if ($element[0].value === '') {      
        var elms = document.getElementsByTagName('body')[0].getElementsByTagName("input"); 
        var alredyFocused = false; 
        for (var i = 0; i < elms.length; i++) { 
         if (elms[i].value === '' && Number(elms[i].getAttribute("tabindex")) < attrs.tabindex) { 
          alredyFocused = true; 
          continue; 
         } 
        } 
        if (!alredyFocused) { 
         $element[0].focus(); 
        } 
       } 
      } 

      fE(); 
      //...some other logic 
     } 
    } 
}); 

В этом коде я ищу элементы ввода внутри всего тела, которое является неправильным. Как ограничить директиву родительским div (контроллером), если я хочу, чтобы директива была повторно использована (Id или класс или html внутри div будут отличаться от div к div)?

Я попытался написать директиву для самого div, чтобы установить фокус на первом из своих детей, который не имеет значения, но в этом случае я не могу использовать ng-модель каждого элемента ввода, чтобы отслеживать изменения модели (с использованием $scope.$watch("?ngModule attribute from an input which is many?", function() {})).

Answer 1

Почему бы не написать более простую директиву, которая выполняет функцию обратного вызова и вызывает ее, когда элемент получает фокус. Что-то вроде:

.directive('myDirective', function(){ 
    return { 
     scope: { 
      callback: '&' 
     }, 
     link: function (scope, element) { 
      element.bind('focus', function() { 
       scope.$apply(scope.callback()); 
      }); 
     } 
    } 
}); 

Директива не нужно знать, что обратный вызов делает только то, что он должен быть вызван в центре внимания. Это может быть применено ко всем элементам, которые требуют некоторого поведения в фокусе.

http://jsfiddle.net/b6ww0rx8/11/