Question

我有一个带有模板的contactForm指令，该指令放在几个地方。它看起来像这样：

template<class T> CrazyCopy{
    T* t;
    // write some custom operator=, custom constructor, custom destructor
};
class B{
    public: CrazyCopy<C> c;
};

指令模板如下所示：

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

（在其他地方，而不是vm.updateInvoice我正在使用其他控制器功能和模型）

updateData对象是控制器函数之一（值取决于联系表单用法，因此我将其作为update-data参数放在指令范围内。问题是我应该将该函数传播到updateModel指令并在模型更改时调用它。如果我这样称它，则执行适当的控制器功能，但数据未定义。所以，我将update-data参数更改为：

更新数据=＆＃34; vm.updateInvoice（vm.model.billingInvoice）＆＃34;它工作了！直到我试图在ng-repeat中添加contact-form指令，而不是我再次定义。我想它与指令范围有关。

我很感激任何帮助...

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

在嵌套指令angularjs中调用控制器函数

1 个答案: