打开模态时，UibModal 未在函数绑定中传递 angular.noop 或未定义答案

【问题标题】：UibModal not passing angular.noop or undefined in function bindings when opening modal打开模态时，UibModal 未在函数绑定中传递 angular.noop 或未定义
【发布时间】：2019-03-27 04:42:14
【问题描述】：

好的，所以我使用 angularjs 1.5.8 和 uibmodal 打开一个模态，其中包含一个组件。我希望组件能够具有一些默认功能，但也能够从消费上下文中覆盖它，所以我试图检查消费上下文是否设置了绑定变量“提交”。当我将组件添加到我的 html 并在消费控制器中定义函数时，这工作得很好，

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

但是当我通过 uibmodal 打开表单时，我无法确定是否设置了函数绑定“提交”。

如果我以错误的方式解决此问题，请随时提出更好的模式。

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

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) { 控制台.log（表格）；控制台.log（模型）； });

这里是通过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 或未定义，但我不断得到这个函数：

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

【问题讨论】：

标签： angularjs bootstrap-modal angular-ui-bootstrap angular-components

【解决方案1】：

好的，我不确定确切的机制，所以请随意解释它，我会将其标记为答案，但只是在我构建模板的位置添加逻辑，并按预期传递 undefined。

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

【讨论】：