根据路由切换 ng-include 的可见性
根据路由切换 ng-include 的可见性
我有以下配置：\n
$routeProvider
.when('/cars', { templateUrl: 'app/cars/index.html', controller: 'CarsCtrl', reloadOnSearch: false })
.when('/bikes', { templateUrl: 'app/bikes/index.html', controller: 'BikesCtrl', reloadOnSearch: false });
\n并且在我的根index.html文件中有：\n
Cars Bikes
\n现在，我希望两个视图同时加载并在DOM中生成，并根据路由/URL显示其中一个视图。\n类似下面这样的（不是实际的工作代码，只是为了给你一个思路）。\napp.js:\n
$routeProvider
.when('/cars', { controller: 'CarsCtrl', reloadOnSearch: false })
.when('/bikes', { controller: 'BikesCtrl', reloadOnSearch: false });
\n根index.html：\n
Cars Bikes
\n更新：我知道ng-view有点类似这样做，但是如果细微差别确实存在。我希望每个视图的HTML只生成一次，并始终保留在DOM中。
问题的出现原因是作者想要在不同的路由下切换显示不同的内容，但是使用了错误的指令。作者应该使用ng-view指令而不是ng-include指令来实现这个目的。ng-view指令可以根据路由的变化来显示不同的模板文件。
解决方法是在代码中使用ng-view指令，并在对应的路由下使用不同的模板文件。例如，可以使用以下代码来显示app/cars/index.html和app/bikes/index.html的内容：
Cars Bikes
这样，当点击Cars链接时，会显示app/cars/index.html的内容；当点击Bikes链接时，会显示app/bikes/index.html的内容。
作者在问题中提到，希望能够通过ng-show或CSS display来切换内容的显示，而不是每次路由变化时都重新加载内容。然而，ng-view指令会在每次路由变化时重新加载内容，所以不能满足作者的需求。
至于作者提到的carsVisible和bikesVisible变量，以及根index.html中的控制器，问题中并未提供足够的信息来判断如何使用它们。所以无法确定它们是否与问题的解决方法有关。
以上是关于问题出现原因和解决方法的整理。希望对读者有所帮助。
问题的出现原因是想要根据路由的不同来切换ng-include的可见性。解决方法是在ng-view之外使用ng-controller来运行一个单独的控制器，在控制器中定义一个isActive函数来判断当前路由是否与给定的viewLocation相匹配，然后在ng-class中使用isActive函数来设置active类。具体代码如下：
首先，在HTML中使用ng-controller来运行一个单独的控制器HeaderController：
然后，在controllers.js中定义HeaderController控制器，并在其中定义isActive函数：
function HeaderController($scope, $location) {
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
}
以上就是根据路由切换ng-include可见性的解决方法。通过ng-controller和isActive函数，我们可以根据当前的路由来设置active类，从而实现对ng-include的切换显示。
通过ng-include根据路由切换视图的可见性的问题是由于$routeProvider配置的问题引起的。在上述代码中，虽然$routeProvider仍然被配置，但没有指定模板或控制器，导致RouteCtrl始终处于活动状态。为了解决这个问题，可以通过监听$routeChangeSuccess事件来操作ng-show属性。
在解决方案中，创建了一个单独的RouteCtrl来通过ng-include加载所有的视图，而不是使用ng-view。模板可以包含自己的ng-controller指令来引入特定的控制器。在HTML中，通过ng-controller指定了RouteCtrl作为整个页面的控制器，并使用ng-include指令来加载不同的模板。同时，使用ng-show属性来控制模板的可见性。在JavaScript中，通过$routeProvider配置了不同的路由，并在RouteCtrl中监听$routeChangeSuccess事件。当路由发生变化时，根据当前的路径来设置carsVisible和bikesVisible的值，从而控制模板的显示与隐藏。
以上就是关于根据路由切换视图的可见性问题的出现原因和解决方法的整理。通过合理配置$routeProvider并在RouteCtrl中监听$routeChangeSuccess事件，可以实现根据不同的路由切换视图的可见性。