javascript 根据路线切换 ng-include 的可见性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15126423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle visibility of a ng-include depending on route
提问by luisfarzati
I have the following configuration:
我有以下配置：
$routeProvider
.when('/cars', { templateUrl: 'app/cars/index.html', controller: 'CarsCtrl', reloadOnSearch: false })
.when('/bikes', { templateUrl: 'app/bikes/index.html', controller: 'BikesCtrl', reloadOnSearch: false });
and somewhere in my root index.html there is a:
在我的根 index.html 的某个地方有一个：
<a href="#/cars">Cars</a>
<a href="#/bikes">Bikes</a>
<div ng-view></div>
Now, I want both views loaded and generated in the DOM at the same time, and show one of them depending on the route/URL.
现在，我希望在 DOM 中同时加载和生成两个视图，并根据路由/URL 显示其中之一。
Something like the following (not actual working code, just to give you an idea).
类似于以下内容（不是实际的工作代码，只是为了给您一个想法）。
app.js:
应用程序.js：
$routeProvider
.when('/cars', { controller: 'CarsCtrl', reloadOnSearch: false })
.when('/bikes', { controller: 'BikesCtrl', reloadOnSearch: false });
root index.html:
根索引.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>
UPDATE: I know that ng-view kind of does this, but the difference, if subtle, exists. I want the html of each view to be generated once and stay in the DOM at all times.
更新：我知道 ng-view 是这样做的，但是差异，如果是微妙的，是存在的。我希望每个视图的 html 生成一次并始终保留在 DOM 中。
回答by Mark Rajcok
I created a single RouteCtrl to load all of your views via ng-include. ng-view is not used. I inlined the templates. The templates could contain their own ng-controller directives to pull in specific controllers.
我创建了一个 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 is still configured, but no template or controller is specified, causing the RouteCtrl to always be active. That controller listens for the $routeChangeSuccessevent and manipulates the ng-show properties accordingly.
$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;
}
});
});
The idea for this solution is from @Andy.
这个解决方案的想法来自@Andy。
回答by Zymotik
I found another way, which I think is the simplest, quickest and most manageable:
我找到了另一种方法，我认为它是最简单、最快和最易于管理的：
How to set bootstrap navbar active class with Angular JS?
Which is:
这是：
Use ng-controller to run a single controller outside of the ng-view:
使用 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>
and include in controllers.js:
并包含在controllers.js 中：
function HeaderController($scope, $location)
{
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
}
回答by Pascal Belloncle
Instead of using ng-include, you should use ng-view;
而不是使用ng-include，你应该使用ng-view;
This will display the content of either app/cars/index.htmlor app/bikes/index.html
这将显示app/cars/index.html或app/bikes/index.html
<a href="#/cars">Cars</a>
<a href="#/bikes">Bikes</a>
<div ng-view></div>
See the Templatesection from http://docs.angularjs.org/tutorial/step_07
回答by Zymotik
Use a service with a show directive:
使用带有 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>
Service:
服务：
myApp.factory('MyService',
function ($location) {
return {
isActive: function (path) {
return (($location.path() == path));
}
}
}
);
App.js:
应用程序.js：
// this is run after angular is instantiated and bootstrapped
myApp.run(function ($rootScope, myService) {
$rootScope.breadcrumbService = MyService;
});
