当前位置: 首页 > 面试题库 >

如何在页面加载时执行AngularJS控制器功能?

郝承悦
2023-03-14
问题内容

目前,我有一个Angular.js页面,它允许搜索并显示结果。用户单击搜索结果,然后单击“后退”按钮。我希望再次显示搜索结果,但是我不知道如何触发搜索执行。详细信息如下:

  • 我的Angular.js页面是一个搜索页面,带有一个搜索字段和一个搜索按钮。用户可以手动键入查询并按下按钮,然后会触发ajax查询并显示结果。我用搜索词更新了网址。一切正常。
  • 用户单击搜索结果,然后转到另一个页面-效果也不错。
  • 用户单击后退按钮,然后返回到我的角度搜索页面,并显示正确的URL,包括搜索词。一切正常。
  • 我已将搜索字段值绑定到URL中的搜索词,因此它包含了预期的搜索词。一切正常。

如何使搜索功能再次执行而无需用户按下“搜索按钮”?如果是jQuery,那么我将在documentready函数中执行一个函数。我看不到Angular.js等效项。


问题答案:

一方面,如@ Mark-Rajcok所说,您可以使用私有内部函数:

// at the bottom of your controller
var init = function () {
   // check if there is query in url
   // and fire search in case its value is not empty
};
// and fire it after definition
init();

您也可以看看ng-init指令。实现将非常像:

// register controller in html
<div data-ng-controller="myCtrl" data-ng-init="init()"></div>

// in controller
$scope.init = function () {
    // check if there is query in url
    // and fire search in case its value is not empty
};

但是要小心,因为角度文档暗示(自v1.2起)不要ng- init为此使用。但是imo取决于您应用程序的体系结构。

ng-init曾想将后端的值传递给angular应用程序:

<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>


 类似资料:
  • 问题内容: 页面完全加载后,我需要执行一些JavaScript代码。这包括图像之类的东西。 我知道您可以检查DOM是否准备就绪,但是我不知道这是否与页面完全加载时相同。 问题答案: 叫做。在DOM准备就绪之前就已经出现了问题,实际上是由于等待图像的确切原因而创建了DOM ready 。

  • 问题内容: 我有一个现有页面,需要在其中添加一个可以动态加载的控制器的角度应用程序。 这是一个片段,它根据API和我发现的一些相关问题实现了关于如何完成操作的最佳猜测: JSFiddle。请注意,这是对实际事件链的简化,在以上各行之间有各种异步调用和用户输入。 当我尝试运行上述代码时,由$ compile返回的链接器将抛出:。如果我正确地理解了引导程序,那么它返回的注射器应该知道该模块,对吗? 相

  • 问题内容: 我目前有一个内置路由的AngularJS应用,它与静态属性分配完美配合。但是我真正想做的是为控制器分配不同的路由: 我想做的是在这里对我的财产做同样的事情,例如: 但似乎我得到一个错误,说找不到 所以有什么办法可以在路由配置中动态加载控制器功能名称? 问题答案: 使用angular ui-router可以做到这一点。 ui-router允许您指定“ controllerProvider

  • 问题内容: 我正在使用inside 执行外部脚本。 现在,由于脚本是 在 页面加载 之前 执行的,因此我无法访问。在文档“加载”后(HTML已完全下载并在RAM中),我想执行一些JavaScript。执行脚本时,是否有任何我可以挂上的事件,这些事件将在页面加载时触发? 问题答案: 这些解决方案将起作用: 要么 甚至 请注意, 最后一个选项是更好的选择,因为它不引人注目并且被[认为是更标准的。

  • 问题内容: 如何从网页的任何位置(控制器组件外部)调用控制器下定义的函数? 当我按下“获取”按钮时,它可以完美运行。但是我需要从div控制器外部调用它。逻辑是:默认情况下,我的div是隐藏的。在导航菜单中的某个位置,我按了一个按钮,它应该显示()我的div并执行“获取”功能。我该如何实现? 我的网页是: 我的js: 问题答案: 这是从外部调用控制器功能的一种方法: 您的控制器的功能在哪里。 你可以

  • 问题内容: 我了解AngularJS会在某些代码中运行两次,有时甚至更多,例如事件,不断检查模型状态等。 但是我的代码: 执行两次,将2条记录插入我的数据库。很显然,我一直在为此奋斗,我一直在学习! 问题答案: 应用路由器将导航指定为如下所示: 但我在: 这使控制器消化了两次。从HTML中删除属性可以解决此问题。或者,可以从路由指令中删除该属性。 使用选项卡式导航时也会出现此问题。例如,可能包含: