7

我有以下配置：

$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 显示其中一个。

类似于以下内容（不是实际的工作代码，只是为了给您一个想法）。

应用程序.js：

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

根索引.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-view 可以做到这一点，但存在细微差别。我希望每个视图的 html 生成一次并始终保留在 DOM 中。

4

4 回答 4

9

我创建了一个 RouteCtrl 来通过 ng-include 加载所有视图。不使用 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;
    }
  });
});

普朗克

这个解决方案的想法来自@Andy。

于 2013-03-02T01:51:30.697 回答
3

我找到了另一种方式，我认为这是最简单、最快捷和最易于管理的方式：

如何使用 Angular JS 设置引导导航栏活动类？

这是：

使用 ng-controller 在 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>

并包含在 controllers.js 中：

function HeaderController($scope, $location) 
{ 
    $scope.isActive = function (viewLocation) { 
        return viewLocation === $location.path();
    };
}
于 2014-06-23T20:42:10.250 回答
1

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-28T02:42:35.267 回答
1

使用带有 show 指令的服务：

<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-28T10:27:09.227 回答