Javascript 根url上的角度隐藏flexslider

因此，我想

ng隐藏
div
，它在
root
上有
flexslider
。问题是转到另一个路径后，
图像
将无法加载

我的
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>


启动plunker时，它会显示
index.html
——不带
flexslider
，这很好：



现在，当您单击第一个或第二个链接时，模板视图将更改，并加载
first.html/second.html
模板，它还应显示flexslider，而flexslider不会。但它显示了flexslider样式（请注意框阴影）


但如果您将其保留在第一/第二视图上，然后切换选项卡并返回（在浏览器中），它将显示图像

有人能解释一下这里发生了什么吗？
无论何时以任何方式操作DOM，都应该通过指令而不是在控制器或纯Javascript中进行操作

特别是对于这个问题（使用带有FlexSlider的Angular），我建议查看有人制定的指令，使这些指令能够很好地相互配合

初始建议：无论何时，只要要在任何情况下操作DOM，请使用指令。所以flexslider的初始化应该在一个指令内。@MichaelLynch我试过了，但没有用。也许我做错了什么。你能试试吗？我同意这可以解决图像问题，但滑块现在不起作用了
div.flex-viewport
应该在
div.flexslider
内部，而不是外部。我看到了该指令。我将把它作为最后的手段。我相信我的问题的解决方案很简单，所以我还没有放弃：）这是我最后的答案（使用指令）。也许可以将start参数更改为该指令所具有的（）。也不知道为什么他们在启动flexslider时会超时，但这可能是另一种尝试。
app.controller('SliderController', ['$scope', '$location', function($scope, $location){ 
    $scope.$on('$routeChangeStart', function(next, current) { 
        $scope.currentPath = $location.path();
    });
}]);