根据路线切换 ng-include 的可见性 [英] Toggle visibility of a ng-include depending on route
问题描述
我有以下配置:
$routeProvider.when('/cars', { templateUrl: 'app/cars/index.html', 控制器: 'CarsCtrl', reloadOnSearch: false }).when('/bikes', { templateUrl: 'app/bikes/index.html', controller: 'BikesCtrl', reloadOnSearch: false });在我的根 index.html 的某处有一个:
汽车<a href="#/bikes">自行车</a><div ng-view></div>现在，我希望同时在 DOM 中加载和生成两个视图，并根据路由/URL 显示其中之一.
类似于以下内容(不是实际的工作代码，只是为了给您一个想法).
app.js:
$routeProvider.when('/cars', { 控制器: 'CarsCtrl', reloadOnSearch: false }).when('/bikes', { controller: 'BikesCtrl', reloadOnSearch: false });根索引.html:
汽车<a href="#/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 中.
我创建了一个 RouteCtrl 来通过 ng-include 加载您的所有视图.不使用 ng-view.我内联了模板.模板可以包含它们自己的 ng-controller 指令来拉入特定的控制器.
<a href="#/cars">汽车</a><a href="#/bikes">自行车</a><div ng-controller="RouteCtrl"><div ng-include="'/cars.html'" ng-show="carsVisible"></div><div ng-include="'/bikes.html'" ng-show="bikesVisible"></div><script type="text/ng-template" id="/cars.html">汽车模板.<script type="text/ng-template" id="/bikes.html">自行车模板.
$routeProvider 仍然配置，但没有指定模板或控制器，导致 RouteCtrl 始终处于活动状态.该控制器侦听 $routeChangeSuccess 事件并相应地操作 ng-show 属性.
app.config(function($routeProvider) {$routeProvider.when('/汽车', {} ).when('/自行车', {})});app.controller('RouteCtrl', function($scope, $route, $location) {$scope.$on('$routeChangeSuccess', function() {var path = $location.path();控制台日志(路径)；$scope.carsVisible = false;$scope.bikesVisible = false;如果(路径 === '/汽车'){$scope.carsVisible = true;} else if(path === '/bikes') {$scope.bikesVisible = true;}});});此解决方案的想法来自 @Andy.
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:
<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.
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 });
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>
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.
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 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;
}
});
});
The idea for this solution is from @Andy.
这篇关于根据路线切换 ng-include 的可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
