我需要在我的Angular应用程序中显示一个模态窗口(基本上只是一个隐藏的div,它将加载一个已编译的模板).问题是,我需要在模态打开时更改URL,以便用户可以复制链接并直接转到模态窗口,还可以使用后退按钮关闭模态窗口并返回上一页.这类似于Pinterest单击别针时处理模态窗口的方式.
到目前为止,我已经创建了一个加载模板的指令,使用$ compile编译它,注入$ scope,然后显示已编译的模板.这很好用.
问题是,只要我使用$ location更改路径,路由控制器就会触发并将模板加载到ng-view中.
我想到了两种克服这个问题的方法,但是还没能实现:
当我使用$ location更改URL时,以某种方式阻止路由控制器触发.我已经为$ routeChangeStart添加了一个监听器来防止默认发生,但这似乎不起作用.
以某种方式向页面添加另一个视图处理程序(在页面上基本上有2个命名的ng-view指令),并且每个都能够处理不同的路由.目前看不到Angular支持这一点.
URL必须是格式/ item/item_id而不是/ item？item_id = 12345.
任何帮助,将不胜感激.
小智 13
如果您使用此处所述的ui.router模块,您现在可以执行此操作:https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal - 某个特定的国家.
他们的例子:
$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");
}
});
}
});
我还将'errorCallback'函数传递给then()函数,通过按Escape或单击背景来处理模态解除.
我有类似的要求.我需要:
我找不到所有这些工作的好例子,但我能找到点点滴滴的例子,所以我把它们放在一个工作的例子中,如下所示:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
<script>
// init the app with ui.router and ui.bootstrap modules
var app = angular.module('app', ['ui.router', 'ui.bootstrap']);
// make back button handle closing the modal
app.run(['$rootScope', '$modalStack',
function($rootScope, $modalStack) {
$rootScope.$on('$stateChangeStart', function() {
var top = $modalStack.getTop();
if (top) {
$modalStack.dismiss(top.key);
}
});
}
]);
// configure the stateProvider
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// default page to be "/" (home)
$urlRouterProvider.otherwise('/');
// configure the route states
$stateProvider
// define home route "/"
.state('home', {
url: '/'
})
// define modal route "/modal"
.state('modal', {
url: '/modal',
// trigger the modal to open when this route is active
onEnter: ['$stateParams', '$state', '$modal',
function($stateParams, $state, $modal) {
$modal
// handle modal open
.open({
template: '<div class="modal-header"><h3 class="modal-title">Modal</h3></div><div class="modal-body">The modal body...</div><div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>',
controller: ['$scope',
function($scope) {
// handle after clicking Cancel button
$scope.cancel = function() {
$scope.$dismiss();
};
// close modal after clicking OK button
$scope.ok = function() {
$scope.$close(true);
};
}
]
})
// change route after modal result
.result.then(function() {
// change route after clicking OK button
$state.transitionTo('home');
}, function() {
// change route after clicking Cancel button or clicking background
$state.transitionTo('home');
});
}
]
});
}
]);
</script>
</head>
<body>
<a href="#/modal" class="btn btn-default">POPUP!</a>
<div ui-view></div>
</body>
</html>
你可以在plunker上查看它:http://plnkr.co/edit/tLyfRP6sx9C9Vee7pOfC
单击plunker中的"打开嵌入视图"链接以查看哈希标记的工作情况.
hermanschutte的解决方案有效(见TiagoRoldão的帖子评论).我正在逐步发布以帮助澄清.
首先,在配置中:
.when('/posts', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
reloadOnSearch: false // this allows us to use the back button to get out of modals.
})
然后,在打开模态(你需要位置模块):
$location.search('modal');
在模态控制器中:
$scope.$on('$locationChangeSuccess', function() {
$scope.close(); // call your close function
});
您提到的命名视图解决方案在 angularJS 邮件列表上进行了很好的讨论，但截至目前（以及不久的将来）， $route 系统无法处理多个视图。
\n\n正如我在一些地方说过的，在这里也说过几次，$route 系统是 Angular 非常固执己见的立场可能成为障碍的情况之一：它本来就是简单的，但它不是\xc2\xb4t 非常可配置的。我个人不直接使用它，而是通过我在这里找到的解决方案绕过它。
\n\n它使事情变得有点复杂，但它给了你更大的灵活性 - 这个想法是 $route 仅用于触发（手动）渲染函数，您可以在其中分配值并根据需要触发 $broadcasts （通常，从 main控制器）。
\n\n我没有尝试过的一件事是“混合”解决方案 - 也就是说，正常使用 $route 系统，并将 /item/item_id 路由配置为不具有视图参数（以便不更改主视图，启动通过其他路线）并通过 $routeChangeStart 事件执行某些操作（请记住，您可以为路线分配任何值，正如您在我引用的页面中看到的那样）
\n\n同样，我个人更喜欢完全使用替代方法。
\n| 归档时间： |
|
| 查看次数： |
28336 次 |
| 最近记录： |