ng-routed AngularJS SPA ng-show Bootstrap Carousel 不工作答案

【问题标题】：ng-routed AngularJS SPA ng-show a Bootstrap Carousel not workingng-routed AngularJS SPA ng-show Bootstrap Carousel 不工作
【发布时间】：2015-10-22 10:00:42
【问题描述】：

PLUNKER

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

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

我正在尝试在我的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 和 Bootstrap Carousel”）揭示了未回答的 SO 问题。

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

【问题讨论】：

标签： angularjs twitter-bootstrap carousel ngroute

【解决方案1】：

不把首页特有的东西放到首页的模板里有点奇怪，不过不管怎样…… 您的代码有两个主要问题：

您正试图从不受此控制器控制的页面部分访问 indexController 范围内的变量。控制器只控制它的视图。控制器的 $scope 仅限于其视图。
您只初始化了一次 isIndexPage 变量。之后永远不会改变。

解决方案：

为整个页面创建一个控制器，并将用于控制轮播可见性的逻辑放入该控制器中
使用将根据当前位置返回 true 或 false 的函数

请参阅http://plnkr.co/edit/8luxeIbyIPEKy0LkemM0?p=preview 获取您的 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()" ...>

【讨论】：

我已经将它部署到我的主应用程序并且它工作了！谢谢你，谢谢你，谢谢你！从现在开始，我会注意那些控制器范围的恶作剧。