问题 Angular:ng-init不会在加载时运行


我已经看到关于这个ng-init问题的堆栈溢出的一些exmaples,虽然我似乎找不到使用控制器引用它的一个。

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

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

在控制器中:

$scope.init = function(){

        alert("do something");
};

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

我错过了什么吗?

谢谢


3186
2017-07-11 09:48


起源

这是它的工作原理 - Mosho
你在这里遇到同样的问题[在这里输入链接描述] [1] [1]: stackoverflow.com/questions/17104639/... - ThomasP1988
我对这个问题感到困惑,这是一个问题,它的工作方式你观察它的工作方式(因为它的设计工作?)...除了一个@Mosho提供的答案之外你还有什么答案? - Jens
请花点时间查看答案并选择正确答案(或添加您的解决方案,如果不同)。 - domokun


答案:


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')

})

编辑 -   假设你正在使用 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')      

  })    
})

13
2017-07-11 10:10



在某些情况下,以这种方式使用ng-init可以将服务器端变量传输到初始index.html中,例如, ng-init =“init(@razorVariable)”,显然有替代方案,但我发现这种方法实际上相当干净。我们在将现有应用程序转换为SPA应用程序时使用了相当多的功能。在那里完成的任务可能不会以这种方式初始化很多东西,但是人们永远无法真正排除这种情况。 - Jens
谢谢@domokun的回复,我已经尝试了你提到的第二种方法,它仍然在控制器完全设置屏幕上的所有组件之前运行。有什么我可以要求它等到一切都加载,然后运行init代码? - Anton Hughes
@AntonHughes我明白了。看看我在编辑中添加的代码 - domokun