代码之家 › 专栏 › 技术社区 › Justinas

AngularJS ngRequired自定义指令

angularjs html javascript

Justinas · 技术社区 · 5 年前

我有个小指令要补充 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>

0 回复 | 直到 5 年前

Justinas 5 年前

正如@PetrAveryanov在评论中指出的,有可能 $observe 用于跟踪其更改的指令中的属性。

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>