Question

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

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

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

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

我做了一些研究，我读了一些关于promises和resolve的内容，可以帮助我找到解决这个问题的方法，但是我还没有看到如何做到这一点。

提前致谢！

Answer 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();
});
});

Answer 2

我忘记了这个问题！

即使是他的回答也许也有效，我认为有更好的解决方案。

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

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

在AngularJS ngview中加载图像后，如何执行基础js调用？

2 个答案: