我正在尝试为应用程序上的元素弹出一个模态窗口,该窗口使用ui.bootstrap(http://angular-ui.github.io/bootstrap/#/modal)显示更多信息(包括注释等内容)。该元素作为指令加载到页面上,我认为我遇到了嵌套作用域的问题,但看起来好像模态窗口正在触发,但没有出现(屏幕淡出)。
我的指示如下:
.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;
}
}
});
};
}
};
});
并且artifactModealCtrl控制器如下所示:
.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);
});
})
我知道我从ajax调用中收到的数据是成功的,因为我可以将其记录到控制台。任何有关正确方向的见解或指示都会受到高度赞赏。
答案 0 :(得分:0)
这很可能是找不到HTML模板的问题。模态是启动和淡出屏幕,但模板没有找到,所以屏幕上没有任何显示。
我个人在templateUrl
属性中引用模板的文件位置并没有成功,所以我所做的是在主页中包含html模板,或者从模式中触发任何页面,如下所示:
<div ng-include src="'../views/directives/modal-artifact.html'">
确保模板的路径准确无误,您应该能够通过在页面加载时通过firebug(或类似的浏览器开发工具)查看文件的内容来确认这一点。
接下来,假设模板标记的id
属性为"modal-artifact.html"
(<script type="text/ng-template" id="modal-artifact.html">
),请将templateUrl设置为:
templateUrl: 'modal-artifact.html' //this must match the id of your template