I am working with a modal controller in my AngularJS application, and here is an example:
angular.module('myApp').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.arrayList = [];
$scope.newItem = function () {
var modalInstance = $modal.open({
templateUrl: 'newItem.html',
controller: 'newItemCtrl',
windowClass: 'app-modal-window',
backdrop: 'static',
resolve: {
}
});
modalInstance.result.then(function (editable) {
console.log($scope.arrayList);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.newArrayItem = function () {
var modalInstance = $modal.open({
templateUrl: 'newArrayItem.html',
controller: 'newArrayCtrl',
windowClass: 'app-modal-window',
backdrop: 'static',
resolve: {
}
});
modalInstance.result.then(function (editable) {
$scope.arrayList.push(editable);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
My goal is to open a modal window to create a 'newItem' and then within that window, open another modal to create 'ArrayItems'. After creating each individual array item and closing the modal, I want to add that item to my $scope.arrayList. However, when I try to access $scope.arrayList after all array items are created, it appears to be empty.
It seems like I need to push the objects to the parent scope in order to access them properly. How can I achieve this?