ng-routed AngularJS SPA ng-show a Bootstrap 传送带不工作

Question

我正在开发一个 AngularJS SPA，使用 ng-route 和 ng-animate。我正在尝试使用 ng-show 在 index.html#/ 上显示 Bootstrap 轮播。非常简单的任务。

我希望轮播显示在索引页上，而不是在关于页或联系页上。

我正在尝试在我的 indexController 中执行逻辑，如下所示：

  if ($location.path() == "/") {
      $scope.isIndexPage = true;
  }

在我的 HTML 中：

<div id="myCarousel" class="carousel slide" data-ride="carousel" ng-show="isIndexPage">

但它没有按预期工作：轮播不显示。删除 ng-show 属性后，将显示轮播，但会显示在所有页面上。

如何让轮播只显示在首页？我试过 ng-include-ing 和 ng-ifing carousel.htm 等变体。许多 Google 搜索（例如 "AngularJS SPA and Bootstrap Carousel" 显示未回答的 SO 问题。

提前感谢您的任何意见。这是 PLUNKER.

Answer 1

首页特有的东西不放到首页的模板里有点奇怪，但不管怎么说... 您的代码有 2 个主要问题：

解决方案：

查看 http://plnkr.co/edit/8luxeIbyIPEKy0LkemM0?p=preview for fork for your plunker（额外的 JS 代码在 script.js 的末尾）：

appname.controller('MainCtrl', function($scope, $location) {
  $scope.isIndexPage = function() {
    return $location.path() === '/';
  }
});

并在 index.html 文件中：

<body ng-controller="MainCtrl">
    <div ng-show="isIndexPage()" ...>

ng-routed AngularJS SPA ng-show a Bootstrap Carousel not working