Question

如何在bootstrap模式中打开路由模板，而不离开当前页面，考虑以下情况？

我有路由器

$routeProvider
        .when('/', {
            templateUrl: '/views/products.html',
            controller: 'MainCtrl'
        })

        .when('/product/:articleId', {
            templateUrl: '/views/product-detail.html',
            controller: 'ProductDetailCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });

控制器

angular.module('n2goApp')
        .controller('MainCtrl', function($scope, $location, $cookieStore, api) {
         api.products().then(function(response) {

                $scope.products = response;
                $scope.totalItems = response.total;
                $('#loading').hide();
            })

});

生成第一个视图，这是一个列表和超链接第二个视图，将以模态

打开

<div ng-controller="MainCtrl"><h2><div ng-repeat="product in products"><a href="/product/{{ product.productid}}">{{ product.productname}}</a></h2></div></div>

现在，当用户点击链接时将路由到第二个控制器，并且将生成模态但是当前页面//不应该离开，后面应该保持当前视图

angular.module('n2goApp')
  .controller('ProductDetailCtrl', function ($scope,$modal, api, $routeParams) {
    var articleID = $routeParams.articleId;
    $scope.edited = api.product(articleID);  
    $modal.open({templateUrl:'/views/product-detail.html'});

  });

当用户关闭模态时，应该看到之前访问过的视图

Answer 1

我认为你不需要这样的路线。为什么不简单地使用AngularJS Anchor，点击哪个会使用模板加载模态。路由用于切换URL，但您不想这样做。

如果你绝对必须使用路线，那么你可以通过转换回＆＃39; /＆＃39;来模拟这个。模态关闭后的路径（在onClose()处理程序或等效的调用$location.path("/")中）。当然这意味着您的主页控制器将被重新执行。

不同路线上的角度ui bootstrap模态

1 个答案: