在Angularjs中添加/刪除路線變更的CSS類

我不確定Angular如何實現這一點。我想添加和刪除路線變化的CSS類。我正在嘗試顯示和隱藏垂直菜單。目前我正在使用ui-route。任何建議或鏈接，例如，將不勝感激或者在不同的方法來我的問題，任何其他建議也歡迎在Angularjs中添加/刪除路線變更的CSS類

來源

2014-11-09 GeekOnGadgets

可以註冊變更路線和這個CSS添加到您的DOM：

$rootScope.$on('$routeChangeSuccess', function (event, current, previous) { 
    // Add your logic, for instance: 
    $('body').addClass('hide-menu'); 
});

顯然有在路線改變之前引發的事件：「$ locationChangeStart」，here。
/編輯/- 更好的方法
此外，我寧願用NG-class屬性和簡單的綁定您的主控制器，它有一定的價值。

app.controller('MainController', function ($scope) { 
    $scope.toggleMenu = function(isToShow) { 
     $scope.isVisibleMenu = isToShow == true; 
    }; 
});

然後在你的HTML：（你可以明顯地添加動畫或任何其他東西來切換此菜單）

<!-- Menu toggle button--> 
<button ng-click="toggleMenu()"></button> 

<div class="toggleable-menu" ng-class="{'visible-menu': isVisibleMenu}"> 
<!-- The menu content--> 
</div>

和最簡單的CSS possbile

.toggelable-menu { 
    display: none; 
} 

.toggelable-menu.visible-menu { 
    display: block; 
}

來源

2014-11-09 06:50:12 Tomer

爲什麼向下票呢？ – Tomer 2014-11-09 08:04:34

我通常會引導人們非常清楚在這種方法中描述的做法。你正在使用angular，你不應該使用jquery來混淆body標籤的類。其次，對於簡單控制導航可視性而言，混淆這種頂級DOM標籤是多餘的。第三，答案不涉及基於狀態的切換，你有一個按鈕來切換一個類。雖然可以使用一個類，但是由於ng-show或ng-if就足夠了，所以它可能是多餘的，但無論是哪種情況，都沒有提及基於狀態的$ check。 – ProLoser 2014-11-11 10:05:48

最簡單，最高效方式：

angular.module(...).run(function($rootScope, $state) { 
    $rootScope.$state = $state; 
}); 

<div ng-if="$state.contains('someState')">...</div>

如果菜單中有大量綁定，這將刪除將提高性能的DOM。

不過，我不斷地告訴人們考慮利用命名視圖導航：

<body> 
    <nav ui-view="nav"></nav> 
    <div class="container" ui-view></div> 
</body> 

$stateProvider.state('home', { 
    views: { 
    '[email protected]': { 
     templateUrl: 'nav.html' 
    } 
    '': { 
     // normal templateUrl and controller goes here. 
    } 
    } 
});

這個涼爽的部分是孩子各國可以重寫和控制什麼導航文件來使用，甚至可以設置解析和在導航和內容之間共享數據的控制器。無需指令/服務！

最後，你能做到這太：

<nav ng-show="$state.contains('somestate')"></nav> 
<nav ng-class="{someClass:$state.contains('somestate')}"></nav>

或者結賬ui-sref-active

我建議所有的主要假設你正在使用的用戶界面，路由器，因爲它是最好的！

來源

2014-11-09 07:59:51 ProLoser

我喜歡這個通過全局化$ state。 – 2014-11-09 08:50:07

偉大的答案:)你可以請創建一個更好的理解Plunker？謝謝 – GeekOnGadgets 2014-11-09 20:49:16

試試這個：

app.run(function ($rootScope) { 
    $rootScope.$on("$stateChangeStart", function(event, toState, fromState){ 

    if (toState.url === "/path") { 
     $('div').addClass('className'); 
    } else { 
     $('div').removeClass('className'); 
    } 

    }); 
});

來源

2015-07-31 14:23:53

在Angularjs中添加/刪除路線變更的CSS類

回答

相關問題