Question

好的，所以我正在使用angularjs 1.5.8和uibmodal打开模态，模态内有一个组件。我希望这些组件能够具有一些默认功能，但也能够从使用环境中覆盖它，因此我试图检查使用环境是否已设置该绑定变量“ submit”。当我将组件添加到html并在使用方控制器中定义函数时，

<contacts-form submit="vm.consumingContextSubmit(form, model)"></contacts-form>

但是当我通过uibmodal打开表单时，我无法确定是否设置了绑定“ submit”的功能。

如果我要这样做，请以错误的方式提出更好的模式。

我已将组件的绑定定义为允许未定义：（也尝试使用常规的旧'＆'。）

angular.
    module(APPNAME).
    component('contactsForm', {  // This name is what AngularJS uses to match to the `<contacts-form>` element.
        templateUrl: '../Scripts/components/add-update-forms/contacts-form/contacts-form.component.html',
        controller: 'ContactsFormController',
        controllerAs: 'cfc',
        bindings: {
            modelId: '=',
            submit: '&?',
            cancel: '&?'
    }
});

以下是使用方上下文中的调用： vm。$ modalService.openFormModal（'contacts'，contactId，titleText，function（form，model）{ console.log（form）; console.log（model）; }）;

这是服务功能，通过uibModal打开模式

function openFormModal(modelName, dataModelId, titleText, submitFunction) {
        // convert undefineds to blank strings
        titleText = titleText == undefined ? '' : titleText;
        dataModelId = dataModelId == undefined ? '' : dataModelId;
        var templateString = '<div class="inmodal"><div class="modal-header"><h4 class="modal-title">'
            + titleText
            + '<button class="pull-right btn btn-danger" ng-click="$close()">X</button></h4></div>'
            + '<div class="modal-body" style="overflow:auto;background-color: white !important;padding:0px;">'
            + '<' + modelName + '-form model-id="\'' + dataModelId + '\'" submit="uib.submitFunction(form, model)" cancel="$close()"></' + modelName + '-form></div></div>';
        $uibModal.open({
            animation: true,
            template: templateString,
            controller: ['$scope', 'submitFunctionParam', function ($scope, submitFunctionParam) {
                var vm = this;
                vm.$scope = $scope;
                // all this should be unneed. 
                // it should be the same as vm.submitFunction = submitFunctionParam
                if (submitFunctionParam !== undefined) {
                    vm.submitFunction = submitFunctionParam;
                } else { // unneeded but to be explicit
                    vm.submitFunction = undefined;
                }
            }],
           controllerAs: 'uib',
            resolve: {
                submitFunctionParam: function () {
                    return submitFunction;
                }
            }
        })

但是当我进入联系人表单组件时：

function _submit() {
        console.log(vm.submit);
        if (vm.submit === angular.noop || vm.submit === undefined) {
            validate(vm.form);
            if (vm.form.$valid) {
                //do default updates
                var contact = vm.dataModel;
                if (vm.contactUrlId) {
                    vm.$contactsService.updateContact(contact).then(_onUpdateContactSuccess);
                } else {
                    vm.$contactsService.createContact(contact).then(_onCreateNewContactSuccess);
                }
            } else {
                vm.$alertService.warning('Form is invalid. Please fix errors.');
            }
        } else {
            //call function from consuming context
            vm.submit({ form : vm.form }, { model : vm.dataModel });
        }
    };

在我的组件中，我定义了一个提交函数，用于检查angular.noop或undefined，但我一直在获取此函数：

ƒ (locals) {
    return parentGet(scope, locals);
}

Answer 1

好吧，我不确定确切的机制，所以可以随时解释它，我将其标记为答案，只是在构建模板的地方添加了逻辑，并按预期传递了未定义的内容。

   var templateString = '<div class="inmodal"><div class="modal-header"><h4 class="modal-title">'
            + titleText
            + '<button class="pull-right btn btn-danger" ng-click="$close()">X</button></h4></div>'
            + '<div class="modal-body" style="overflow:auto;background-color: white !important;padding:0px;">'
            + '<' + modelName + '-form model-id="\'' + dataModelId + '\'" ';
        if (submitFunction === angular.noop || submitFunction === undefined) {

        } else {
            templateString = templateString + 'submit = "uib.submitFunction(form, model)" ';
        }
        templateString = templateString + 'cancel = "$close()" ></' + modelName + ' - form ></div ></div > ';

打开模式时，UibModal没有通过angular.noop或在函数绑定中未定义

1 个答案: