AngularJS ngRequired 自定义指令

Question

我有一个小指令将 required class 添加到表单元素的最近标签。它与属性 required 一起工作正常，但是当使用 ng-required 时，它似乎没有将指令绑定到元素。

如何在 ng-required 更改时动态触发指令绑定？

注意如果可能的话，我不想向 HTML 添加任何额外的标记，以获得一个全局指令

var app = angular.module('app',[]);
app.controller('myController',function ($scope) {
  $scope.isRequired = false;
  
  $scope.$watch('isRequired', function () {
    angular.element('#html').text(angular.element('#required-element').html());
  })
});
app.directive('required', function () {
  return {
    restrict: 'A',
    link: function ($scope, $elem) {
      console.log('Linking');
      label = $elem.closest('.input-container').find('label');

      if (label.length) {
         label.addClass('required');
      }
    }
  };
});

.required:before {
  content: '*';
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app"ng-controller="myController">

  <div class="input-container">
      <label>Label</label>
      <input type="text" required/>
  </div>
  
  <div id="required-element" class="input-container">
      <label>Label Dynamic</label>
      <input type="text" ng-required="isRequired == true"/>
  </div>

  <label><input type="checkbox" ng-model="isRequired"/> Make required: {{isRequired | json}}</label>
  
  <hr/>
  <span id="html"></span>
</div>

Answer 1

正如@PetrAveryanov 在评论中指出的那样，可以 $observe 指令中的属性来跟踪它的变化。

不过，我们似乎还需要 2 个指令。一种用于静态 required，另一种用于观察 ngRequired 添加的属性

angular
  .module('app', [])
  .controller('myController',function ($scope) {
    $scope.isRequired = false;
  
    $scope.$watch('isRequired', function () {
      angular.element('#html').text(angular.element('#required-element').html());
    });
  })
  .factory('requiredLabelFactory', function () {
    toggleLabel = function ($elem, labelState) {
      label = $elem.closest('.input-container').find('label');

      if (label.length) {
         label.toggleClass('required', labelState);
      }
    };
    
    return {
      toggleLabel: toggleLabel
    };
  })
  .directive('required', function (requiredLabelFactory) {
    return {
      restrict: 'A',
      link: function ($scope, $elem) {
        requiredLabelFactory.toggleLabel($elem, true);
      }
    }
  })
  .directive('ngRequired', function (requiredLabelFactory) {
    return {
      restrict: 'A',
      link: function ($scope, $elem, attr) {
        attr.$observe('required', function(newVal) {
          requiredLabelFactory.toggleLabel($elem, newVal);
        });
      }
    };
  });

.required:before {
  content: '*';
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app"ng-controller="myController">

  <div class="input-container">
      <label>Label</label>
      <input type="text" required/>
  </div>
  
  <div id="required-element" class="input-container">
      <label>Label Dynamic</label>
      <input type="text" ng-required="isRequired == true"/>
  </div>

  <label><input type="checkbox" ng-model="isRequired"/> Make required: {{isRequired | json}}</label>
  
  <hr/>
  <span id="html"></span>
</div>

AngularJS ngRequired 自定义指令

AngularJS ngRequired custom directive

html

javascript

angularjs

ng-required