Trung tâm cá nhân
sách gpt4 ăn đã đi

javascript - 根据路线切换 ng-include 的可见性

In lại 作者：数据小太阳 更新时间：2023-10-29 04:30:12 25 4
mua khóa gpt4 giày nike

我有以下配置:

$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 的某处有一个:

Cars
Bikes

现在，我希望两个 View 同时在 DOM 中加载和生成，并根据路由/URL 显示其中一个。

类似下面的内容(不是实际的工作代码，只是给你一个想法)。

应用程序.js:

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

根索引.html:

Cars
Bikes


gia hạn:我知道 ng-view 有点这样做，但存在细微差别。我希望每个 View 的 html 生成一次并始终保留在 DOM 中。

câu trả lời hay nhất

我创建了一个 RouteCtrl 来通过 ng-include 加载所有 View 。未使用 ng-view。我内联了模板。模板可以包含它们自己的 ng-controller 指令以引入特定的 Controller 。


  Cars
  Bikes
  

      

      

  


   
   
Xem sitemap của VNExpress

$routeProvider 仍然配置，但没有指定模板或 Controller ，导致 RouteCtrl 始终处于事件状态。该 Controller 监听 $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;
    }
  });
});

Plunker

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

关于javascript - 根据路线切换 ng-include 的可见性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15126423/

25 4 0
Đề xuất bài viết: javascript - AngularJS 重复部分中多次调用的函数
Đề xuất bài viết: javascript - 更改 yeoman 的应用程序文件夹名称
Đề xuất bài viết: javascript - jQuery keydown 但如果在文本框中则忽略
Đề xuất bài viết: TypeError Object[object object] không có phương thức SubSelf, TypeError Object[object object] không có phương thức intersectsPlane
数据小太阳
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress