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

【问题标题】：How do I execute foundation js call after images are loaded in AngularJS ngview?在AngularJS ngview中加载图像后如何执行基础js调用？
【发布时间】：2013-11-19 23:47:21
【问题描述】：

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

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

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

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

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

提前致谢！

【问题讨论】：

恕我直言，我将避免将 jQuery 与 Angularjs 一起使用。如果您想使用框架来设置响应式 Web 应用程序，我更喜欢使用 Bootstrap 或 Angular-UI angular-ui.github.io。如果你只是想创建一个滑块，你可以使用 ng-switch 和 CSS3 动画（nganimate.org/angularjs/ng-switch/…）。
感谢您的回复！我没有研究过 Angular-UI，因为它在我看来是为了简化在一个页面上拥有多个视图。如果我错了，请纠正我，但是当涉及到 Bootstrap 和 Foundation 时，这不是个人选择的问题吗？他们做的几乎一样，都使用 jQuery 作为他们的“附加”元素，比如内容滑块等。我会看看滑块的建议！谢谢！
Bootstrap 即使没有 jQuery 也可以工作。
闪烁似乎可以用 ngCloak 修复？

标签： javascript angularjs zurb-foundation angularjs-routing orbit

【解决方案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();
});
});

【讨论】：

【解决方案2】：

我忘记了这个问题！

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

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

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

【讨论】：