在AngularJS中使用自定义网址的模态窗口

发布时间：2020-12-17 07:40:14 所属栏目：安全来源：网络整理

导读：我需要在我的Angular应用程序中显示一个模态窗口(基本上只是一个隐藏的div,将加载一个编译的模板).问题是,当模态打开时,我需要更改URL,以便用户可以复制链接并直接转到模态窗口,还可以使用后退按钮关闭模态窗口并返回上一页.这类似于Pinterest点击一个针时处

我需要在我的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");
            }
        });
    }
});

我还传递一个’errorCallback’函数到then()函数,通过按Escape或点击背景处理模态解雇.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!