角属性指令加ng变化

Question

我有一个指令定义为：

​

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

​

我用的是：

​

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

​

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

这是可行的，我可以看到在页面呈现后标记中的ng更改。

​

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

​

问题是model.changed(.)不是开火。如果我把它硬编码，而不是使用指令，一切都会像预期的那样工作。

我遗漏了什么？

谢谢。

Answer 1

您需要在添加ng更改指令后编译元素。

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

工作柱塞。

有关在这个帖子。中从指令中添加指令的详细信息