角度属性ディレクティブ追加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-changeを指定します。私のシナリオは実際にはもう少し複雑ですが、私はこの質問のために単純化しています。このため、私はそれを動的に注入し、それを入力マークアップに直接配置する必要はありません。

これは動作し、ページがレンダリングされるとマークアップの変更が表示されます。

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