javascript - 根 url 上的 Angular 隐藏 flexslider

Question

所以，我想ng-hide div，它在root 上有flexslider。问题是 images 在转到另一条路径后不会加载。

我的 index.html 看起来像:

<ul>
  <li><a href="#/">Root</a></li>           <!-- don't show slider -->
  <li><a href="#/first">First</a></li>     <!-- show slider -->
  <li><a href="#/second">Second</a></li>   <!-- show slider -->
</ul>

<div ng-controller="SliderController">
  <div ng-include="'slider.html'" ng-hide="currentPath === '/'"></div>
</div>

<div ng-view></div>

和app.js:

app.controller('SliderController', ['$scope', '$location', function($scope, $location){ 
    $scope.$on('$routeChangeStart', function(next, current) { 
        $scope.currentPath = $location.path();
    });
}]);

Plunker

当您启动 plunker 时，它会向您显示 index.html- 没有 flexslider，这很好:

---

现在，当您单击第一个 或第二个 链接时，模板 View 会更改并加载first.html/second.html 模板，它还应该显示 flexslider，但实际上没有。但它显示了 flexslider 样式(注意框阴影)。

但是如果您将它留在first/second View 中，然后切换选项卡并返回(在浏览器中)，它会显示图像。

谁能解释一下这是怎么回事？

Answer 1

无论何时以任何方式操作 DOM，都应该通过指令而不是在 Controller 或纯 Javascript 中进行操作。

特别是对于这个问题(将 Angular 与 FlexSlider 结合使用)我建议查看某人为使它们能够很好地相互配合而制定的指令。

https://github.com/thenikso/angular-flexslider