AngularJS ngRequired custom directive

Question

I have small directive to add required class to closest label of form element. It works fine with attribute required, but when using ng-required it seems to be not binding directive to element.

How to dynamically trigger directive binding on ng-required change?

NOTE I don't want to add any extra markup to HTML if possible, to have one global directive

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>

ng-required is just a directive, u can override it or decorate -- adding whatever behavior — Petr Averyanov, Feb 12 '20 at 13:03

score 0 · Accepted Answer · answered Feb 12 '20 at 15:37

As @PetrAveryanov pointed out in comments, it's possible to $observe attributes in directive to track changes of it.

Still, it seems that we need 2 directives. One for static required and one with observation of ngRequired added attribute

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 custom directive

1 Answers1