根网址上的角度隐藏flexslider

Question

所以，我想ng-hide div flexslider root 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(); }); }]); ：

index.html

Plunker

当您启动plunker时，它会显示flexslider - 没有first.html/second.html，这很好：

---

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

但是如果你将它留在{{1}}视图上，并切换选项卡并返回（在浏览器中），它会显示图像。

有人可以解释这里发生了什么吗？

Answer 1

每当您以任何方式操纵DOM时，都应该通过指令而不是控制器或纯Javascript来操作。

特别针对这个问题（使用带有FlexSlider的Angular），我建议查看某人为使这些指令很好地相互配合而制定的指令。

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