Функция контроллера вызова внутри вложенной директивы angularjs

Question

У меня есть директива contactForm с шаблоном, который размещается в нескольких местах. Это выглядит примерно так:

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

шаблон Директива выглядит следующим образом:

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

И в этом шаблоне директивы у меня есть еще один пользовательская директива: директива

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

формы контакта используются как это:

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

(В других местах вместо vm.updateInvoice я использую другие функции и модели контроллера)

объект updateData является одной из функций контроллера (значение зависит от использования контактной формы, поэтому я помещаю его в область действия директивы как обновление аргумент -data. Проблема в том, что я должен распространять эту функцию для обновления директивыModel и называть ее при изменении модели. Если я вызываю его так, выполняется соответствующая функция контроллера, но данные не определены. Итак, я изменил аргумент update-data на:

update-data = "vm.updateInvoice (vm.model.billingInvoice)", и это сработало! до тех пор, пока я не попытался добавить директивы контактной формы внутри ng-repeat, и я снова получу undefined. Я полагаю, что это имеет какое-то отношение к областям директивы.

Я был бы признателен за любую помощь ...

Answer 1

Не выполнять функцию, если передать его в качестве параметра. У вас будет результат его вызова, а не ссылка на эту функцию. Передайте это так: 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" />" 

Затем внутри UpdateModel директивы, когда вы звоните scope.updateData(), вы будете иметь переданную функцию в качестве возвращаемого значения, и будет в состоянии выполнить его:

var update = scope.updateData(); 

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