CODEWITHSUNDEEP
angularjscompilation
John Tiggernaught
John Tiggernaught

Reputation: 788

Angular - form.$dirty not updating after $compile

I have a directive attached to an input field that calls $compile(element)(scope); in its Link method. Everything works well, except when trying to use the following:

ng-class="{ 'has-error' : frm.first_name.$invalid && frm.last_name.$dirty }"

The $invalid property updates, but $dirty (and $pristine) always retain their initial values.

plnkr example

I'm not sure how to approach this problem. Does anyone have any ideas? Any info would be greatly appreciated. Thanks!

Upvotes: 1

Views: 649

Answers (1)

Kevin F
Kevin F

Reputation: 2885

You need to use compile, instead of link like so:

  app.directive('inputDataType', ['$compile', function ($compile) {
      var compileFn = function(element) {
          element.removeAttr('input-data-type');

          // Add pattern
          element.attr('ng-pattern', '^[a-zA-Z0-9]+$');

          // Make input field required
          element.attr('required', 'true');

          // Compile to attach new directives / pattern / required
          var fn = $compile(element);

          return function(scope){
              fn(scope);
          };
      };

      return {
          restrict: 'A',
          scope: false,
          terminal: true,
          priority: 1001,
          compile: compileFn
      };
  }]);

Look here for more info: creating a new directive with angularjs

Updated plunkr: http://plnkr.co/edit/85uHw9pSS3dEy9dGX2lz

Upvotes: 1

Related Questions