I have encountered an issue with a simple angular modal that is triggered using angular ui.bootstrap. The modal opens successfully, passes values, but struggles to close or cancel. I suspect it might be an issue with the $scopes not communicating effectively. I am aware that each modal has its own $scope, but I am unsure of how to establish communication between them.
Here is the markup for the modal:
<div>{{entry}}</div>
<button class="btn btn-primary">{{ $modalInstance.close() }}Close</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
Both methods have been attempted but neither seem to work...
Additionally, here is the controller responsible for "opening" the modal:
.controller('dashboard',['$scope', '$rootScope', '$location', '$modal', 'loginService', function($scope, $rootScope, $location, $modal, loginService){
var allowed = loginService.authenticate();
allowed.get(
function(result){
console.log(result);
if (result.loggedin !== undefined && result.loggedin === true) {
console.log("Welcome!");
}
},
function(result) {
$location.path("admin");
$rootScope.errorVisible = true;
}
);
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: '/partials/submission_mod.html',
controller: ['$scope', '$modalInstance', function($scope, $modalInstance){
$scope.modalInstance = $modalInstance;
$scope.entry = "Submission info goes here.";
}]
});
};
}])
Now, the question arises - should the $scope.close function belong in the dashboard controller or should it remain in its own controller as demonstrated here ?