我需要在我的Angular应用程序中显示一个模态窗口(基本上只是一个隐藏的div,将加载一个编译的模板).问题是,当模态打开时,我需要更改URL,以便用户可以复制链接并直接转到模态窗口,还可以使用后退按钮关闭模态窗口并返回上一页.这类似于Pinterest点击一个针时处理模态窗口的方式.
到目前为止,我创建了一个加载模板的指令,使用$compile进行编译,注入$scope,然后显示编译的模板.这工作正常
问题是一旦我使用$location来更改路径,路由控制器就会启动并将模板加载到ng-view中.
我想到了克服这个的两种方法,但是还没有实现：
>以某种方式阻止路由控制器在使用$location更改url时触发.我已经添加了一个监听器到$routeChangeStart以防止默认发生,但这似乎不起作用.
>不知何故向页面添加另一个视图处理程序(在页面上基本上有2个命名的ng-view指令),并且每个处理程序都可以处理不同的路由.现在看不到Angular支持这个.
该URL需要格式为/ item / item_id而不是/ item？item_id = 12345.
任何帮助将不胜感激.
如果您按照以下所述使用ui.router模块,则可以执行此操作：
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state.
他们的例子：
$stateProvider.state("items.add",{
url: "/add",onEnter: function($stateParams,$state,$modal,$resource) {
$modal.open({
templateUrl: "items/add",resolve: {
item: function() { new Item(123).get(); }
},controller: ['$scope','item',function($scope,item) {
$scope.dismiss = function() {
$scope.$dismiss();
};
$scope.save = function() {
item.update().then(function() {
$scope.$close(true);
});
};
}]
}).result.then(function(result) {
if (result) {
return $state.transitionTo("items");
}
});
}
});
