Call-Controller-Funktion in verschachtelten Direktive angularjs

Question

Ich habe eine contactForm-Direktive mit Vorlage, die an mehreren Stellen platziert ist. Es sieht etwa so aus:

<script type="text/ng-template" id="template/contactForm.html"> 
     <div> 
      <div class="form-group" 
       ng-class="{ 'has-error' : form.fullname.$invalid && !form.fullname.$pristine}"> 
       <label class="control-label">Name *</label> 
       <input class="textInput form-control" name="fullname" type="text" 
         ng-model="modelVar.fullname" ng-model-options="{ updateOn: 'blur'}" required ng-maxlength="500" update-model model="modelVar" update-data="updateData(data)" /> 
       <span class="completed" ng-if="form.fullname.$valid"></span> 
       <span ng-show="form.fullname.$error.required && !form.fullname.$pristine" 
         style="text-align:right" class="help-block">Recipient name is required.</span> 
       <span ng-show="form.fullname.$error.maxlength" 
         style="text-align:right" class="help-block">Maximum length is 500 characters.</span> 
      </div> 
     </div> 
    </script> 

Und in dieser Richtlinie Vorlage ich eine andere benutzerdefinierte Richtlinie haben:

.directive('contactForm', ['SecureCheckoutService', function(SecureCheckoutService) { 
    return { 
     templateUrl: 'template/contactForm.html', 
     replace: true, 
     restrict: 'E', 
     scope: { 
      'modelVar': '=', 
     }, 
     require: '^form', 
     link: function (scope, element, attr, formCtrl) { 
      scope.form = formCtrl; 
     } 
    }; 
}]) 

Richtlinie Vorlage sieht wie folgt aus

.directive('updateModel', ['$compile', function ($compile) { 
return { 
    restrict: 'A', 
    scope: { 
     'updateData': '&', 
     'model': '=' 
    }, 
    require: 'ngModel', 
    link: function link(scope, elem, attrs, modelCtrl) { 
     scope.$watch(function() { return modelCtrl.$modelValue; }, function (newValue, oldValue) { 
      if (newValue != oldValue && modelCtrl.$valid){ 
       scope.updateData({data: scope.model}); 
      } 
     }); 
    } 
    }; 
}]) 

Kontaktformular Direktive wird benutzt, wie dies:

<contact-form model-var="vm.model.billingInvoice" update-data="vm.updateInvoice(data)"></contact-form> 

(An anderen Orten statt vm.updateInvoice ich andere Controller-Funktionen und Modelle verwende)

update Objekt ist eines der Reglerfunktionen (Wert auf Kontakt-Formular Nutzung abhängt, so dass ich es in der Richtlinie Umfang als Update -Datenargument Das Problem ist, dass ich diese Funktion auf updateModel-Richtlinie propagieren sollte und sie bei Modellwechsel aufrufen. Wenn ich es so nenne, wird entsprechende Controller-Funktion ausgeführt, aber Daten sind nicht definiert. So änderte ich Update-Daten-Argument zu:

update-data = "vm.updateInvoice (vm.model.billingInvoice)" und es hat funktioniert! bis ich versucht habe, contact-form-Anweisungen innerhalb von ng-repeat hinzuzufügen, und dann werde ich wieder undefiniert. Ich nehme an, es hat etwas mit Direktiven zu tun.

ich Hilfe schätzen würde ...

Answer 1

Sie Funktion nicht ausführen, wenn Sie es als Parameter übergeben. Sie erhalten ein Ergebnis seines Aufrufs, nicht den Link zu dieser Funktion. Übergeben Sie es wie folgt: update-data="updateData"

<input class="textInput form-control" name="fullname" type="text" ng-model="modelVar.fullname" ng-model-options="{ updateOn: 'blur'}" required ng-maxlength="500" update-model model="modelVar" update-data="updateData" />" 

Dann innen Update Richtlinie, wenn Sie scope.updateData() aufrufen, werden Sie übergeben Funktion als Rückgabewert haben, und wäre es in der Lage ausführen:

var update = scope.updateData(); 

    scope.$watch(function() { return modelCtrl.$modelValue; }, function (newValue, oldValue) { 
     if (newValue != oldValue && modelCtrl.$valid){ 
      update({data: scope.model}); 
     } 
    });