2016-06-29 22 views
2

ich zwei Richtlinien haben, die miteinander verdrahtet werden (minimale Code-Beispiele werden zur Verfügung gestellt):ngRepeat Pausen-Richtlinie der Funktionalität

  • ist für die Validierung (apValidation).

    module.directive('apValidation', ['$compile', function($compile){ 
        return { 
         restrict: 'A', 
         compile: function (element) { 
         element.removeAttr('ap-validation'); // to avoid infinite compilation 
         element.attr('ng-blur', 'testMe()'); // this method has to be called for the validation to happen 
         var fn = $compile(element); 
          return function (scope) { 
           fn(scope); 
           }; 
         }, 
         controller: function ($scope, $attrs) { 
          $scope.testMe = function() { 
           alert("Validating current text field"); 
          }; 
         } 
        } 
    }]); 
    
  • der andere ist eine wiederverwendbare Textfeldkomponente, als eine Richtlinie mit isoliertem Bereich definiert, dass die Verwendung der Validierungsrichtlinie (apTextField) macht.

    module.directive('apTextField', function(){ 
        return{ 
         restrict: 'E', 
         replace:true, 
         scope: { 
          name: '@', 
          label: '@' 
         }, 
        template: '<div>{{label}}: <input type="text" id="someId" name="{{name}}" ap-validation></input></div>' 
    
        } 
    }); 
    

Das Problem, das ich mit Blick auf bin, ist, dass, wenn ich mein Textfeld Richtlinie in einem Kontext ngRepeat verwenden, irgendwie die Validierungsfunktion, die von einer Unschärfe Ereignisse in diesem Fall ausgelöst wird, wird nicht mehr genannt. Die Validierung funktioniert jedoch außerhalb des ngRepeat-Kontextes.

<div ng-app="my-app" ng-controller="MainController"> 
<div> 
    Without ng-repeat<br> 
    <div ng-init="field = {name: 'age', label: 'Age'}"> 
     <ap-text-field 
       label={{field.label}} 
       name="{{field.name}}"> 
       </ap-text-field> 
    </div><br> 

    With ng-repeat<br> 

     <div ng-repeat="field in fields"> 
       <ap-text-field 
       label={{field.label}} 
       name="{{field.name}}"> 
       </ap-text-field> 
     </div> 
</div> 

Ich weiß, dass ngRepeat ein neues isolatedScope schafft, aber ich kann nicht verstehen, wie diese Auswirkungen meine Richtlinie in diesem Fall, und welche eine richtige Lösung für dieses Problem ist.

Ich habe eine JS Fiddle vorbereitet, um mein Problem am besten zu beschreiben.

Antwort

5

Der Grund dafür ist, dass die Direktive ngRepeat ihren Repeater bereits kompiliert und aus dem DOM herausgerissen hat (um während eines $ watchCollection() Callbacks wieder eingefügt zu werden); Daher kompiliert der folgende Code var fn = $compile(element); ein Element, das aus dem DOM herausgerissen wurde. So ist die Lösung, die die neuen element zum Rück Rückruf zur Verfügung gestellt zu kompilieren:

compile: function (element) { 
     element.removeAttr('ap-validation'); // to avoid infinite compilation 
     element.attr('ng-blur', 'testMe()'); // this method has to be called for the validation to happen 
     return function (scope, element) { 
          //^ the new element 
     $compile(element)(scope); 
     }; 
    } 

Demo:https://jsfiddle.net/g3yeg5xp/