Angular:ng-init 不在负载上运行

2024-01-26

我已经看到了一些有关 ng-init 问题的堆栈溢出示例,尽管我似乎找不到使用控制器引用它的示例。

我通过在 html 文件中包含以下内容来调用控制器中的函数

<div class="tab-container" ng-controller = "ExampleController" ng-init = "init()" >

在控制器中:

$scope.init = function(){

        alert("do something");
};

它确实运行,但它在组件加载到屏幕上之前运行。

我错过了什么吗?

Thanks


ng-init应该像这样工作,因为它用于初始化数据。

一个非常简单的例子:

<ul ng-init="list = [1,2,3,4]">
  <li ng-repeat="l in list"></li>
</ul>

如果你想跑步某物当你的控制器加载时,它实际上比你想象的要简单得多:

app.controller('mainCtrl', function ($scope) {

  var init = function ($scope) {
    // do whatever you need to do to initialize your controller
    $scope.someData = ["Hey", "I'm", "Alive"]
    $scope.otherData = localStorage.getItem('myBackup')
  }

  init()

})

或者甚至更简单,如果您不需要该函数(没有闭包或其他)

app.controller('mainCtrl', function ($scope) {

  // do whatever you need to do to initialize your controller
  $scope.someData = ["Hey", "I'm", "Alive"]
  $scope.otherData = localStorage.getItem('myBackup')

})

Edit -假设你正在使用ngView:
要在页面完全加载时运行代码,您应该在事件上设置一个观察者$viewContentLoaded, 像这样:

  $scope.$on('$viewContentLoaded', function(){
    //Here your view content is fully loaded !!
  });

app.controller('mainCtrl', function ($scope) {

  // This event is triggered when the view has finished loading
  $scope.$on('$viewContentLoaded', function() {

    $scope.someData = ["Hey", "I'm", "Alive"]
    $scope.otherData = localStorage.getItem('myBackup')      

  })    
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular:ng-init 不在负载上运行 的相关文章

  • AngularJS - RouteProvider 解析调用服务方法

    我创建了一项检查用户登录状态的服务 如果令牌存在 则登录用户 否则重定向到登录页面 最初我通过routeProvider解析调用了这个服务 这一次就可以完美工作 但是由于Angularjs服务是单例的 因此测试不会针对连续调用运行 然后 我
  • Angular JS - 如何在模型更改时制作动画?

    当 currentVertical 改变时 我试图做一个很好的淡出 淡入过渡 在淘汰赛中 这很简单 但我在这里无法弄清楚 请帮忙 以下代码显示一个 UL 列表 当单击 LI 元素时 该列表 绑定 到 scope currentVertica
  • Jasmine-jQuery loadFixtures 未定义

    我对整个茉莉花的事情仍然很陌生 在过去的几个小时里我陷入了这个问题 我尝试使用 loadFixture 加载外部夹具文件 我使用 Jasmine 2 0 0 和 Jasmine jQuery 2 0 5 ReferenceError loa
  • Javascript DOM setAttribute 在函数调用中不起作用

    我有一个带有输入元素的 HTML 文件 我希望向其中添加一个名为 valid fieldset011 的新属性 该属性用作 AngularJS 验证器的链接 输入元素具有属性 id fieldset011 如果我使用以下脚本 包含在脚本标签
  • 如何使用 $resource 获取状态代码?

    我提出请求的工厂在这里 angular module myapp factory testResponse http resource AppConfig routeParams rootScope function http resour
  • window.onbeforeunload 在 Android Chrome 上不会触发 [alt.解决方案?]

    我开发了一个简单的聊天应用程序 我正在使用 window onbeforeunload当有人关闭选项卡 浏览器时 基本上是当用户离开房间时 通知其他用户 这是我的代码 scope onExit function scope chatstat
  • AngularJS - 获取已定义路由的列表 - $routeProvider

    我正在尝试实施named routes 所以我不必写整个路径 经常改变 我想我可以编写一个服务来返回定义的路由列表和一个将对象转换为路由的过滤器 使用示例如下所示 a Click here a 假设我已将 name detail 添加到我的
  • Angularjs:两种方式的数据绑定和控制器重新加载

    如果使用路由和控制器 则模型不会在控制器重新加载之间保存其状态 Angular 在每个路由负载上创建控制器实例和新范围 例如 我在输入中键入具有 ng model something 的内容 转到另一条路线 然后返回第一条路线 我输入的所有
  • Angular 模态对话框最佳实践

    与不具有动态内容的对话框相比 创建具有动态内容的模式对话框的最佳实践是什么 例如 我们有一些模式表单接受表单元素列表 并具有提交 取消功能 此外 还有一些模式对话框仅显示确认 确定类型的操作 我见过很多人说对话框应该是传递到控制器的服务 但
  • 如何更改 Angular ui Bootstrap 日期选择器弹出窗口的大小?

    这就是我所指的 http angular ui github io bootstrap http angular ui github io bootstrap 我没有看到任何指示如何控制大小的内容 我尝试更改正文字体 但没有成功 可以通过覆
  • Angular ui.router,从子控制器调用父控制器函数?

    我将 Angular 与 ui router 一起使用 并设置了嵌套视图 父视图有一个 div 我可以通过父控制器上的函数切换其可见性 我想从嵌套视图的子控制器调用此函数 我该怎么做 http plnkr co edit zw5WJVhr7
  • 类型错误:无法读取未定义的属性“defaultPrevented”

    当我进行以下测试时 我收到此错误 it should call pauseAnimationInterval if in focus inject function SearchBoxData intervalManager timeout
  • AngularJS - 设置下拉列表的选定值不起作用

    我在这里复制了我的问题 http jsfiddle net U3pVM 2840 http jsfiddle net U3pVM 2840 正如标题所示 我无法设置使用 ng options 填充的选择的选定值 我已经搜索并尝试了我找到的所
  • Angular-Chart.js 它不显示图表

    我正在尝试使用 Angular chart js 它没有为我显示任何内容 这是我的 javascript 和 html 页面 function angular module app chart js controller BarCtrl f
  • Angular UI Select2,为什么 ng-model 被设置为 JSON 字符串?

    我使用 Angular ui 的 select2 来实现相当简单的下拉菜单 它由位于我的控制器范围内的静态数据数组支持 在我的控制器中 我有一个在下拉列表的 ng change 上调用的函数 以便我可以在值更改时执行一些操作 然而 我发现
  • 如何获取 ng-repeat 中的前一项?

    我有一个模板 仅当当前项目与前一个项目有一些不同的字段时 我才想生成一些 HTML 如何访问 ng repeat 中的前一项 你可以做类似的事情 div ul li div class title index content title c
  • AngularJS 数据绑定在 ng-bind-html 中?

    是否可以将作用域变量的数据绑定到即将绑定为 ng bind html 的 html 即 我有一个 html div caption div 我的角度模板看起来像 div div 范围变量的值caption在角度控制器中设置 所以 我想绑定数
  • AngularJS:遍历嵌套数组

    我正在使用具有以下结构的嵌套数组 scope items attr1 val1 attr2 val2 items attr1 val1 attr2 val2 items 这进入一个ng repeat with ng include像这样 d
  • angularjs ui-router:获取给定状态的子状态列表

    您知道 ui router 中获取给定状态的子状态列表的方法吗 我正在使用 ui router 实现一个复杂的 SPA 可能有 4 级深度导航 我想实现从路由器表自动生成的第二级导航选项卡界面 为此 我需要获取给定状态 可能是抽象状态 的直
  • 如何理解 Angular JS 中的控制台错误消息?有什么工具吗?

    我是 Angular JS 的新手 我的第一个问题是如何理解 Angular JS 中控制台的错误消息 我编写了这段用于匹配密码的代码片段 它在控制台上抛出错误 但它工作正常 它是有线的 我无法从这些控制台消息中理解任何内容 谁能指出我为什

随机推荐