I'm trying to enable a modal window pop up for elements on an application that displays more information (including things like comments etc) using ui.bootstrap (http://angular-ui.github.io/bootstrap/#/modal). The element is being loaded as a directive on the page, and I think i'm running into an issue with nested scopes, however it appears as though the modal window is triggering, but nothing is appearing (the screen fades).
My directive looks like this:
.directive('artifactCause', function() {
return {
restrict: 'E',
replace: true,
scope: {
thing: '=thing'
},
templateUrl: 'views/directives/artifact-cause.html',
controller: function($scope, $element, $attrs, $modal) {
console.log('clicked');
$scope.open = function() {
var modalInstance = $modal.open({
backdrop: true,
keyboard: true,
controller: 'artifactModalCtrl',
templateUrl: 'views/directives/modal-artifact.html',
scope: $scope,
resolve: {
thing: function () {
return $scope.thing.cause_id;
}
}
});
};
}
};
});
and the artifactModealCtrl controller looks like this:
.controller('artifactModalCtrl', function($scope, $http, loggedStatus, thing) {
var token = loggedStatus.token();
$scope.close = function(result) {
dialog.close(result);
};
$http.get( REQUEST_URL + '/Artifact/ArtifactDetail?token=' + token + '&artifact_id=' + thing ).
success(function(data) {
console.log(data);
$scope.thing = data.response;
return data.response;
}).
error(function(data) {
console.log('Error');
console.log(data);
});
})
I know that the data i'm receiving from my ajax call is successful as I can log it to the console. Any insight or pointers in the right direction would be muchly appreciated.
This is most likely an issue of the HTML template not being found. The modal is launching and fading the screen, but the template isnt found so nothing is showing on the screen.
I personally have not had success in referencing a template's file location in the templateUrl
property, so instead what I do is include the html template in a masterpage or whatever page will be firing off the modal, like so:
<div ng-include src="'../views/directives/modal-artifact.html'">
Make sure the path to your template is accurate, you should be able to confirm this by viewing the contents of the file via firebug (or similar browser dev tool) on page load.
Next, assuming the id
attribute of your template tag is "modal-artifact.html"
(<script type="text/ng-template" id="modal-artifact.html">
), set your templateUrl like this:
templateUrl: 'modal-artifact.html' //this must match the id of your template