I have recently created a project using Yeoman (angular-fullstack, angular-material) and encountered an issue with triggering the md-dialog box. When clicking on a div element, the dialog box is supposed to appear. However, instead of showing the popup the page reloads twice without displaying the overlay (http://gyazo.com/c5e05ca2045c3ed9c32bb38d7bf67fc9). It seems like the dialog1.tmpl.html is being treated as a new view. How can I resolve this problem?
Here's a snippet of the code responsible for triggering the pop-up:
$scope.showPopUp = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'dialog1.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
})
function DialogController($scope, $mdDialog) {
if (editId) {
$http.get('/api/task/' + editId).success(function(data) {
console.log("data variable from DialogController", data);
$scope.task_name = data.name;
$scope.task_project_id = data.project_id;
globalTask_Project = data.project_id;
$scope.task_location = data.location_id;
globalTask_location = data.location_id;
$scope.task_estimate_time = data.estimate_time;
$scope.task_project_client_name = data.project_client_name;
$scope.task_url = data.url;
$scope.task_resource_link = data.resource_link;
$scope.task_notes = data.task_notes;
$scope.closeDialog = function() {
var mainApp = angular.element(document.body).controller();
$mdDialog.hide();
editId = null;
globalTask_location = null;
globalTask_Project = null;
}
})
.error(function(data, status, headers, config) {
console.log("Error in retrieving data from server");
});
} else {
$scope.closeDialog = function() {
var mainApp = angular.element(document.body).controller();
$mdDialog.hide();
}
}
}
}