wie ng-change-Handler dynamisch Eingang

Question

app.directive('textForm', function ($compile) { 
 
    return { 
 
     restrict: 'E', 
 
     replace: true, 
 
     templateUrl: "textForm.html", 
 
     scope: { 
 
      label: "@", 
 
      model: "=", 
 
      type: "@", 
 
      name: "@", 
 
     }, 
 
     link: function (scope, element) { 
 
      scope.log = function() { 
 
       console.log(1); 
 
      }; 
 

 
      var input = element.find('.form-control'); 
 
      input.attr({'ng-change': 'log()'}); 
 
      $compile(element.contents())(scope); 
 
     } 
 
    } 
 
});

<!-- this is textForm.html --> 
 
<div class="form-group"> 
 
    <label class="col-xs-3 control-label">{{label}}</label> 
 
    <div class="col-xs-7"> 
 
     <input type="{{type||'text'}}" name="{{name}}" class="form-control" ng-model="model"> 
 
    </div> 
 
</div> 
 

 
<!-- this is how I use the directive --> 
 
<text-form label="name" name="name" model="person.name"></text-form>

der obige Code konnte nicht laufen, kann aber sagen, das Problem hinzuzufügen.

Ich möchte ng-change zu input dynamisch aus irgendeinem Grund hinzufügen und nach einigem Suchen fand ich $compile könnte dies tun. Aber es scheint nicht zu funktionieren und ich weiß nicht warum.

Meine Winkel Version ist 1.5.5

Answer 1

ich glaube, das Problem ist, dass Sie das text-form Element kompilieren (in der Richtlinie genannt), aber Sie fügen Sie den ng-change-Attribut in das .form-control Element (was nicht der Fall ist sogar ein Kind deiner Direktive). So eckig ist sich dessen nicht bewusst und integriert die ng-Änderung nicht richtig.

Ich glaube, Sie diese Anweisung auf dem Element möchten Sie auf diese Weise steuern sollte, das heißt:

<input text-form type="{{type||'text'}}" name="{{name}}" class="form-control" ng-model="model"> 

und die Richtlinie auf ‚A‘ beschränken machen oder

Nicht sicher ‚AE‘, aber ich denke, es würde auch funktionieren, wenn Ihre Anweisung auf einen Elternteil (zB das Formularelement) gesetzt wird.