使用角度路线锚定href链接

时间:2015-12-11 21:48:20

标签: javascript angularjs href angularjs-routing

我在多个视图之间使用角度路由,并尝试在每个路径更改时填充公共面包屑列表。这种方法很好,只是包面条中的超链接不起作用。

基本上我有一个包含以下视图的网站:

视图/ main.html中

视图/ page_a.html

视图/ page_b.html

和结构:

主要>第a页>第b页

$rootScope.$on('$routeChangeSuccess', function(scope, next, current) {  

    var thisView = next.loadedTemplateUrl;
    if (!thisView) return;
    var breadcrumb = jQuery('#breadCrumb'); //<ol> container
    breadcrumb.empty();

    if (thisView.indexOf('page_a') >= 0) {
      breadcrumb.append('<li><a href="#/main">main</a></li>');    
      breadcrumb.append('<li class="active">page a</li>'); 
    }
    else if (thisView.indexOf('page_b') > 0) {
      breadcrumb.append('<li><a href="#/main">main</a></li>');    
      breadcrumb.append('<li><a href="#/page_a">page a</a></li>');
      breadcrumb.append('<li class="active">page b</li>'); 
    }
  });

遗憾的是,这些超链接并未到达正确的位置。我想我已经尝试了所有组合#/ page_a,#/ page_a.html,/ views / page_a.html,...但没有运气。觉得这不应该很难,但它已经很晚了,所以我希望得到一些帮助。 谢谢!

修改

我的路线设置如下:

app.config(function ($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/page_a', {
    templateUrl: 'views/page_a.html'
  })
  .when('/page_b', {
    templateUrl: 'views/page_b.html'
  })
  .otherwise({
    redirectTo: '/'
  });
});

1 个答案:

答案 0 :(得分:8)

好吧,这是一个非常愚蠢的错误,我根本不需要发布这个问题。 的确href="#/page_a"。它工作正常,所以这就像预期的一样简单。