打开模态时,UibModal在函数绑定中没有传递angular.noop或undefined

问题描述 投票:0回答:1

好的,所以我使用angularjs 1.5.8和uibmodal来打开一个带有模态内部组件的模态。我希望组件能够具有一些默认功能,但也能够从消费上下文中覆盖它,所以我试图检查消费上下文是否已设置该绑定变量'submit'。当我将组件添加到我的html并在消费控制器中定义函数时,这很好用,

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

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

如果我正在以错误的方式解决这个问题,请随意提出更好的模式。

我有定义的组件的绑定允许undefined :(尝试过常规的旧'&'。)

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);
}
angularjs bootstrap-modal angular-ui-bootstrap angular-components
1个回答
0
投票

好吧,我不确定这些机制是如此随意解释它,我会将其标记为答案,但只是在构建模板的地方添加逻辑,并按预期传递未定义。

   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 > ';
© www.soinside.com 2019 - 2024. All rights reserved.