Using ng-click="$widget.addItem()" in my template triggers a $uibModal.
Everything is functioning properly - opening, closing, etc.
The issue arises when trying to get the callback value from $modal.close($value). The function itself works correctly, the modal closes, and the promise success function is executed. However, it consistently returns undefined.
Controller for Component
app.component('list', {
templateUrl: 'widgets/list.html',
controllerAs: '$widget',
controller: function($uibModal) {
// Add item using modal
this.addItem = function() {
// Initialize and open $uibModal
var modalInstance = $uibModal.open({
component : 'modalAddItem',
size : 'md'
});
// Promise from $uibModal
modalInstance.result.then(function(params) {
console.log(params)
// ---> undefined
});
}
}
}
Template for Modal
<div class="modal-add-item">
<div class="modal-body" id="modal-body">
// Template content here
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-default" ng-click="$modal.ok()">Ok</button>
</div>
</div>
Component for Modal
app.component('modalAddItem', {
templateUrl: 'widgets/modals/add-item.html',
bindings: {
resolve: '<',
close: '&',
dismiss: '&'
},
controllerAs: '$modal',
controller: function ($scope) {
this.ok = function() {
this.close({item: 'picked item'});
}
}
});
Despite all efforts, the close function continues to produce undefined