路由后缀上的AngularJS特定HTML

AngularJS specific HTML on route suffix

本文关键字：特定 HTML AngularJS 后缀 路由      更新时间：2024-01-02

我正在用Angular构建一个简单的库，我正在尝试在一些路线上显示一个模板，这对Angular来说非常容易。

some.site/#/gallery

完成

App.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider
            .when('/gallery', {
                templateUrl: 'js/views/gallery/main.htm',
                controller: 'galleryCtrl',
                controllerAs: 'gallery'
            })
            .otherwise({
                redirectTo: '/'
            });
    }
]);

但当用户点击东西并进入时，我想有一个div弹出窗口

some.site/#/gallery/thing/1

请注意，我仍然希望我的图库在背景上。

我最初的想法是，除非有*/thing，否则始终隐藏div，这样我就可以在需要时获得类似*/thing/:id的id，但这种方法似乎相当丑陋，因为为什么那个东西一直挂在那里？

还有其他更好的方法吗？

您可以根据您的路线设置$routeParam，比如说：

  • 如果url是/gallery，则"showPopup"=false
  • 如果url为gallery/thing/：id，则"showPopup"=true

然后在html中将弹出状态绑定到$routeParams.showPopup.

为此，您可以直接在映射中设置参数：

App.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
        .when('/gallery', {
            templateUrl: 'js/views/gallery/main.htm',
            controller: 'galleryCtrl',
            controllerAs: 'gallery',
            resolve: {
              ignored: function ($route) { 
                 $route.current.params.showPopup = false; 
               }
            }
        })
        .when('/gallery/thing/:id', {
            templateUrl: 'js/views/gallery/main.htm',
            controller: 'galleryCtrl',
            controllerAs: 'gallery',
            resolve: {
              ignored: function ($route) { 
                 $route.current.params.showPopup = true; 
               }
            }
        })
        .otherwise({
            redirectTo: '/'
        });
  }
]);

希望我能帮上忙！

相关文章：