Question

我的指令定义为：

＆＃13;

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
        }
    });

＆＃13;

我正在使用的

：

＆＃13;

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

＆＃13;

目标是使用模型字段作为参数动态注入ng-change。我的场景实际上有点复杂，但我正在为这个问题简化它。这就是为什么我需要动态注入它而不是直接将它放在输入标记中。

这有效，我可以在呈现页面后看到标记中的ng-change。

＆＃13;

<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">

＆＃13;

问题是model.changed（...）没有触发。如果我硬编码而不是使用指令，一切都按预期工作。

我错过了什么？

谢谢。

Answer 1

您需要在添加ng-change指令后编译元素。

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

有关在this post.

中添加指令的更多信息

角度属性指令添加ng-change

1 个答案: