切換知名度NG-包括根據路線

我有以下配置：切換知名度NG-包括根據路線

$routeProvider 
.when('/cars', { templateUrl: 'app/cars/index.html', controller: 'CarsCtrl', reloadOnSearch: false }) 
.when('/bikes', { templateUrl: 'app/bikes/index.html', controller: 'BikesCtrl', reloadOnSearch: false });

在我的根

和地方的index.html有一個：

<a href="#/cars">Cars</a> 
<a href="#/bikes">Bikes</a> 
<div ng-view></div>

現在，我想這兩個查看同時在DOM中加載並生成，並根據路由/ URL顯示其中的一個。

類似於以下內容（不是實際的工作代碼，只是爲了給您一個想法）。

app.js：

$routeProvider 
.when('/cars', { controller: 'CarsCtrl', reloadOnSearch: false }) 
.when('/bikes', { controller: 'BikesCtrl', reloadOnSearch: false });

根index.html的：

<a href="#/cars">Cars</a> 
<a href="#/bikes">Bikes</a> 
<div ng-include="'app/cars/index.html'" ng-show="carsVisible"></div> 
<div ng-include="'app/bikes/index.html'" ng-show="bikesVisible"></div>

更新：我知道，NG-觀點樣的做到這一點，但差別，如果微妙，存在。我希望每個視圖的html都能生成一次，並始終保持在DOM中。

來源

2013-02-28 luisfarzati

這是不可能用ng-view來實現的。但問題是，你爲什麼真的想這樣做。是否因爲你想'預處理'每條路線，以便加載速度更快？路由已經非常快，除非你的控制器需要一些異步數據，在這種情況下，你會使用路由定義對象中的'resolve'，加上一些應用初始化代碼來在後臺獲取異步數據。 – Stewie 2013-02-28 08:48:41

的模板節中，我創建了一個單一的RouteCtrl通過加載你的視圖NG-包括。不使用ng-view。我將模板插入。這些模板可以包含自己的ng-controller指令來引入特定的控制器。

<body ng-controller="RouteCtrl"> 
    <a href="#/cars">Cars</a> 
    <a href="#/bikes">Bikes</a> 
    <div ng-controller="RouteCtrl"> 
     <div ng-include="'/cars.html'" ng-show="carsVisible"></div> 
     <div ng-include="'/bikes.html'" ng-show="bikesVisible"></div> 
    </div> 

    <script type="text/ng-template" id="/cars.html"> 
    Cars template. 
    </script> 
    <script type="text/ng-template" id="/bikes.html"> 
    Bikes template. 
    </script>

$ routeProvider仍然配置，但沒有指定模板或控制器，導致RouteCtrl始終處於活動狀態。該控制器監聽$routeChangeSuccess事件並相應地操作ng-show屬性。

app.config(function($routeProvider) { 
    $routeProvider 
    .when('/cars', {}) 
    .when('/bikes', {}) 
}); 

app.controller('RouteCtrl', function($scope, $route, $location) { 
    $scope.$on('$routeChangeSuccess', function() { 
    var path = $location.path(); 
    console.log(path); 
    $scope.carsVisible = false; 
    $scope.bikesVisible = false; 
    if(path === '/cars') { 
     $scope.carsVisible = true; 
    } else if(path === '/bikes') { 
     $scope.bikesVisible = true; 
    } 
    }); 
});

Plunker

的理念，爲這個解決方案是從@Andy。

來源

2013-03-02 01:51:30

而不是使用ng-include，你應該使用ng-view;

這將顯示任app/cars/index.html或app/bikes/index.html

<a href="#/cars">Cars</a> 
<a href="#/bikes">Bikes</a> 
<div ng-view></div>

內容請參閱從http://docs.angularjs.org/tutorial/step_07

來源

2013-02-28 02:42:35

嗨帕斯卡，感謝您的回覆！但是，這不是我正在尋找的。我在我的問題上作了澄清。 ng-view會切換內容，是的，但是它通過從當前視圖中刪除內容併爲新視圖插入內容來實現，每次路由改變。我想同時顯示兩個內容，只需用ng-show或CSS顯示切換一個或另一個內容即可。 – luisfarzati 2013-02-28 02:49:36

你在哪裏/什麼時候改變'carsVisible'和'bikesVisible'，並且你在根目錄index.html中有某個控制器？ – 2013-02-28 02:51:50

使用帶顯示指令服務：

<div ng-show="myService.isActive('/')">Show this when at default route</div> 
<div ng-show="myService.isActive('/cars')">Show this when at cars</div>

服務：

myApp.factory('MyService', 
    function ($location) { 
     return { 
      isActive: function (path) { 
       return (($location.path() == path)); 
      } 
     } 
    } 
);

應用。JS：

// this is run after angular is instantiated and bootstrapped 
myApp.run(function ($rootScope, myService) { 
    $rootScope.breadcrumbService = MyService; 
});

來源

2014-02-28 10:27:09 Zymotik

我找到了另一種方式，我認爲這是最簡單，最快捷，最輕鬆的管理：

How to set bootstrap navbar active class with Angular JS?

那就是：

使用NG-控制器運行單個ng-view以外的控制器：

<div class="collapse navbar-collapse" ng-controller="HeaderController"> 
    <ul class="nav navbar-nav"> 
     <li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li> 
     <li ng-class="{ active: isActive('/dogs')}"><a href="/dogs">Dogs</a></li> 
     <li ng-class="{ active: isActive('/cats')}"><a href="/cats">Cats</a></li> 
    </ul> 
</div> 
<div ng-view></div>

and include in co ntrollers.js：

function HeaderController($scope, $location) 
{ 
    $scope.isActive = function (viewLocation) { 
     return viewLocation === $location.path(); 
    }; 
}

來源

2014-06-23 20:42:10 Zymotik

切換知名度NG-包括根據路線

回答

相關問題