AngularJS - 添加類$ routeProvider佔位符鏈接

的後續行動，這裏提供了答案：AngularJS - Changing a query param term within $routeProvider?

當使用路由參數，可以是有可能的「活躍」類設置爲元素或它的父元素？這是我嘗試過的，但'active'類不會添加到父元素中。

由於我使用'/：feed_term'佔位符，我面臨的問題是？

.config(function($routeProvider) { 
    $routeProvider 
    .when('/:feed_term', {templateUrl: 'views/feedlist.html', controller: 'searchtermCtrl', activetab: ':feed_term' })  

    .otherwise({redirectTo: '/term/'}); 
}) 

.controller('searchtermCtrl', function($scope, Feed, $routeParams, $route){ 
    $scope.feed = Feed.query({ feed : $routeParams.feed_term }); 
    $scope.activeTab = $route.current.activetab 
})

和HTML看起來像這樣：

<li ng-class="{active: $route.current.activetab == 'feedterm_1'}"> 
    <a href="#/feedterm_1">Feed 1</a> 
</li> 
<li ng-class="{active: $route.current.activetab == 'feedterm_2'}"> 
    <a href="#/feedterm_2">Feed 2</a> 
</li>

任何反饋將大大不勝感激！

謝謝！ Roc。

來源

2013-09-22 Roc

請記住，除非將視圖附加到範圍，否則您的視圖無法訪問數據。您的視圖訪問$route.current，但該數據不在範圍內。根據您發佈的代碼，這樣的事情應該工作：

.config(function($routeProvider) { 
    $routeProvider 
    .when('/:feed_term', { 
     templateUrl: 'views/feedlist.html', 
     controller: 'searchtermCtrl' 
    }) 
    .otherwise({redirectTo: '/term/'}); 
}) 

.controller('searchtermCtrl', function($scope, Feed, $routeParams){ 
    $scope.feed = Feed.query({ feed : $routeParams.feed_term }); 
    $scope.activeTab = $routeParams.feed_term 
})

<li ng-class="{active: activeTab == 'feedterm_1'}"> 
    <a href="#/feedterm_1">Feed 1</a> 
</li> 
<li ng-class="{active: activeTab == 'feedterm_2'}"> 
    <a href="#/feedterm_2">Feed 2</a> 
</li>

來源

2013-09-22 19:19:43

嗨布蘭登，謝謝你的提示。雖然這在視圖中需要時添加類時有幫助，但導航位於視圖之外。如果你可以看看這個[link]（http://pastebin.com/5B6yxzjr），那就太好了。基本上，導航並不放置在視圖內，所以我試圖將它定位在視圖之外。謝謝btw檢查這個問題了。 – Roc

@Roc您可以通過觀看'$ routeChangeSuccess'事件來觀察範圍上的路線變化。這裏有一個例子：http://jsfiddle.net/BinaryMuse/gwHat/ –

謝謝布蘭登！那就是訣竅。非常感謝幫助和演練。 – Roc

AngularJS - 添加類$ routeProvider佔位符鏈接

回答

相關問題