根据路线的可见性切换NG-包括 [英] Toggle visibility of a ng-include depending on route
问题描述
我有以下配置：
$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有一个：
and somewhere in my root index.html there is a:
<a href="#/cars">Cars</a>
<a href="#/bikes">Bikes</a>
<div ng-view></div>
现在，我想这两种观点的同时加载和DOM中产生，并显示其中的一个依据路径/ URL。
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.
像下面的东西（而不是实际工作code，只给你一个想法）。
Something like the following (not actual working code, just to give you an idea).
app.js：
$routeProvider
.when('/cars', { controller: 'CarsCtrl', reloadOnSearch: false })
.when('/bikes', { controller: 'BikesCtrl', reloadOnSearch: false });
根index.html的：
root 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。
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.
推荐答案
我创建一个单一的RouteCtrl通过加载你的视图NG-包括。 NG-视图不被使用。我内联模板。模板可以包含自己的NG-控制器指令特定的控制器来拉。
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.
<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-显示属性。
$routeProvider is still configured, but no template or controller is specified, causing the RouteCtrl to always be active. That controller listens for the $routeChangeSuccess event and manipulates the ng-show properties accordingly.
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 。
The idea for this solution is from @Andy.
这篇关于根据路线的可见性切换NG-包括的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
