页面加载到AngularJS

时间:2017-10-21 11:06:36

标签: javascript jquery angularjs

我刚开始学习AngularJS,但我还不熟悉AngularJS中的术语。这是我的担心,我创建了一个加载动画,当我转到页面时显示,然后我想在加载页面的所有内容后立即停止加载动画。在普通的jQuery中做起来相当容易,因为我可以触发$(window).load(),但它似乎不是有角度的。 $(document).ready()似乎有效,但这并不是我真正需要的,因为即使图像尚未完成加载它也会被触发。我已经在我的控制器内部$scope.init以及控制器内的$window.onload但我仍然无法使其工作。

2 个答案:

答案 0 :(得分:0)

修补程序答案

实际上你不需要等角度地等待任何这些事件。 只需在角度控制器中使用$().. - 网站已经加载。 (类似于window.load()事件。如果jquery没有找到html元素,请尝试用$ timeout包装它(function(){...});

<强>建议

请不要!有一些有角度的方式来制作比疯狂$(&#39;#id&#39;)更合适的东西。逻辑。这将在不断增长的应用中突破。

答案 1 :(得分:0)

我建议您在使用AngularJS应用程序时忘记jQuery。因此,弄清楚如何以AngularJS方式处理所有事情 - 将所有jQuery逻辑移动到角度控制器并避免直接DOM操作(jQuery方式)。

另外,如果您从jQuery转移到AngularJS,那么在线有一个很好的教程:

https://gabrieleromanato.name/introduction-to-angularjs-for-jquery-developers

如果你需要一个切换页面的解决方案,请使用ui-router - 它可以让你在加载页面和解析不同页面的属性时更加灵活:

https://github.com/angular-ui/ui-router

在这种特殊情况下,你可以在$ scope上使用简单的boolean属性,并根据它显示preloader div:

<div ng-show="showOverlay" class="loader" />

然后在你的控制器内你可以输入类似的内容:

$scope.showOverlay = true;

然后在加载页面逻辑并解决承诺后,您可以隐藏该预加载器:

$scope.showOverlay = false;

为了说明我为你创建了预装器的简单小提琴。还要记住有很多不同的实现方法,但这很简单,几乎适用于任何情况:

https://jsfiddle.net/pegla/ng1mn8qp/3/

此处还有一个关于堆栈溢出的答案可以帮助您:

How to execute angular controller function on page load?