如果 div 中的任何输入具有焦点，则角度指令突出显示答案

【问题标题】：angular directive highlight if any of inputs in div has focus如果 div 中的任何输入具有焦点，则角度指令突出显示
【发布时间】：2016-12-27 05:30:03
【问题描述】：

我为带有表单元素的可重复部分创建了一个角度指令当 div 内的任何输入字段处于焦点时，我希望整个部分/div 突出显示

template.html

<div class="col-md-12 employee-section">
<label for="name_{{$index}}">Name</label>
<input type="text" id="name_{{$index}}" class="col-md-6" ng-model="model.name"/>

<label for="address_{{$index}}">Address</label>
<input type="text" id="address_{{$index}}" class="col-md-6" ng-model="model.address"/>
</div>

指令

angular.module('test').directive('employee' , function(){
       return {
            link: function(scope, element){
            },
            restrict: 'AE',
            scope: {
                model: "="
            },
            templateUrl: 'template.html'
        };
 }

控制器

angular.module('test').controller('employeeCtrl' , function($scope){
    $scope.employees = [{name:'Jackk',address:'Main st'}, {name:'Jill',address:'Main st 123'}
});

html页面

<div ng-repeat="employee in employees>
    <employee model="employee"></employee>
</div>

【问题讨论】：

你只声明了一个指令你有没有尝试编写任何代码来使指令起作用？

标签： javascript jquery css angularjs html

【解决方案1】：

这是我正在寻找的指令，带有 Plnkr 的链接

app.directive('ngFocusModel', function () {
    return function (scope, element) {

      var focusListener = function () {
          scope.hasFocus = true;
          scope.$digest();
      };

      var blurListener = function () {
          scope.hasFocus = false;
          scope.$digest();
      };


      element[0].addEventListener('focus', focusListener, true);
      element[0].addEventListener('blur', blurListener, true);
   };
});

【讨论】：