好的,所以我使用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);
}
好吧,我不确定这些机制是如此随意解释它,我会将其标记为答案,但只是在构建模板的地方添加逻辑,并按预期传递未定义。
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 > ';