Angular attribute directive add ng-change

Question

I have a directive defined as:

module.directive('inputChanged', function () {
        function link(scope, element, attrs) {
            var field = attrs.ngModel;
            if (field) {
                var fn = "model.changed('" + field + "')";
                element.attr('ng-change', fn);
            }            
        }

        return {
            restrict: 'A',
            link: link
        }
    });

which I am using like:

<input ng-model="model.user.middleName" input-changed type="text" class="k-textbox">

The goal is to dynamically inject the ng-change with the model field as parameter. My scenario is actually a bit more complex, but I am simplifying it for this question. This is why I need to inject it dynamically and not place it directly in the input markup.

This works and I can see the ng-change in the markup once the page is rendered.

<input ng-model="model.user.middleName.value" type="text" class="k-textbox ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched" ng-change="model.changed('model.user.middleName.value')" aria-invalid="false">

The problem is that model.changed(...) is not firing. If I hardcode it instead of using the directive, everything works as expected.

What am I missing?

Thank you.

Community · Accepted Answer · 2017-05-23 10:30:35Z

1

You need to compile the element after adding the ng-change directive.

angular
  .module('app')
  .directive('inputChanged', inputChanged);

  function inputChanged($compile) {

  var directive = {
      restrict: 'A',
      link: link,
      terminal: true,
      priority: 1000,
  };
  return directive;

  function link(scope, element, attrs) {
    var field = attrs.ngModel;
    if (field) {
      var fn = "main.changed(" + field + ")";

      // Remove the attribute to prevent  
      // an infinite compile loop
      element.removeAttr('input-changed');
      element.attr('ng-change', fn);
      $compile(element)(scope);
    }
  }
};

Working plunker.

More information about adding directives from a directive in this post.

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Dec 21, 2016 at 22:16

ndoes

6785 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dpdragnev Over a year ago

awesome @ndoes. that did it. thanks for your help.

Collectives™ on Stack Overflow

Angular attribute directive add ng-change

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related