1

我正在使用 AngularJS 和 Foundation 创建一个 Web 应用程序。

当我使用 Foundation 附带的 Orbit 内容滑块时，问题就出现了。它需要调用 Foundation 的初始化函数 $(document).foundation()。当我使用 ng-view 和 AngularJS 路由功能时，我必须在每次加载新视图时调用此函数。我尝试通过将调用放入每条路由加载的控制器函数来实现这一点。但我认为这会导致脚本运行得太快（就在加载图像或实际视图之前），因为它不会显示轨道滑块，直到我重新加载视图或页面（我猜图像已经缓存了然后在后台，可以很快加载）。我还尝试使用 $routeChangeSuccess 事件来调用基础函数，但这给了我相同的结果。

我还创建了一个与图像加载事件绑定的指令，现在即使这确实有效，并且滑块从第一次加载视图时正确显示，基础调用也必须在没有图像的页面上进行，另外还有一些使用这种方法时内容闪烁（我实际上可以看到 Orbit 使用的 UL 项目项目符号出现和消失）

我刚开始使用 AngularJS，所以我不确定我在做什么/说的是完全正确的。:)

我做了一些研究，并阅读了一些关于承诺和解决方案的内容，这可能有助于我找到解决这个问题的方法，但我无法看到如何做到这一点。

提前致谢！

4

2 回答 2

1

我参加聚会迟到了，但对于其他人来说，这里是如何在加载 ng-view 后加载基础。加载视图时初始化基础。

angular.module('exampleAppApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
})
// initialize foundation here...
.run(function($rootScope) {
 $rootScope.$on('$viewContentLoaded', function () {
   $(document).foundation();
});
});
于 2015-01-22T07:56:23.197 回答
0

我忘记了这个问题！

即使是艺术柔术，他的回答也可能有效，我认为有更好的解决方案。

有些人对 Foundation JavaScript 插件进行了完整的基于 Angular 的重写。

http://pineconellc.github.io/angular-foundation/

于 2015-03-30T16:43:22.313 回答