angularjs - Angular：ng-init 在加载时不运行

Question

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

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

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

在控制器中：

$scope.init = function(){

        alert("do something");
};

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

我错过了什么吗？

谢谢

Answer 1

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

  })    
})

Answer 2

另一种选择是使用 jquery。如果您依赖于许多元素，它将适合。但请确保使用您选择的项目版本加载 jquery。加载jquery（插入版本...）：

<script src="https://code.jquery.com/jquery-..."></script>

js代码：

$(document).ready(function() { 
        alert("do something");
    });