AngularJS 中使用 ng-init 初始化数据的方法详解-JavaScript中文网-JavaScript教程资源分享门户

什么是 ng-init？

ng-init 是 AngularJS 中的一个指令，用于初始化数据。它可以在页面加载时，自动执行一些 JavaScript 代码，从而初始化一些数据。使用 ng-init 可以让我们在页面加载时，就能够预先准备好一些数据，从而提高页面加载速度和用户体验。

如何使用 ng-init？

在 HTML 中，我们可以通过在标签上添加 ng-init 指令来使用它。下面是一个简单的例子：

<div ng-init="name = 'Tom'; age = 18;">
  <p>我的名字是 {{name}}，我今年 {{age}} 岁。</p>
</div>

在这个例子中，我们在 div 标签上使用了 ng-init 指令，然后在 ng-init 中设置了两个变量 name 和 age，分别赋值为 'Tom' 和 18。接着，我们在 p 标签中使用了这两个变量，通过双花括号语法来显示它们的值。

当页面加载时，ng-init 指令会自动执行其中的 JavaScript 代码，从而初始化这两个变量。然后，AngularJS 会自动更新页面中使用了这些变量的部分，将它们的值显示出来。

除了在 div 标签上使用 ng-init 指令外，我们还可以在任何支持 ng-model 指令的标签上使用 ng-init 指令。例如，下面是一个在 input 标签上使用 ng-init 指令的例子：

<input type="text" ng-model="name" ng-init="name = 'Tom'">

在这个例子中，我们在 input 标签上使用了 ng-init 指令，然后在 ng-init 中设置了一个变量 name，赋值为 'Tom'。同时，我们还在 input 标签中使用了 ng-model 指令，将这个变量与输入框绑定起来。这样，当页面加载时，ng-init 指令会自动执行其中的 JavaScript 代码，从而初始化这个变量。然后，AngularJS 会自动将这个变量的值显示在输入框中。

ng-init 的注意事项

虽然 ng-init 看起来很简单，但是我们在使用它时，需要注意一些事项。下面是一些常见的注意事项：

1. 不要在 ng-repeat 中使用 ng-init

ng-init 指令不应该在 ng-repeat 中使用。如果在 ng-repeat 中使用 ng-init 指令，那么它会在每次循环中都执行一次，从而导致性能问题。如果需要在 ng-repeat 中初始化数据，应该使用控制器中的数据来代替。

2. 初始化对象时要小心

当我们在 ng-init 中初始化一个对象时，需要注意对象属性的命名方式。如果属性名使用了特殊字符或者与 JavaScript 关键字相同，可能会导致初始化失败。为了避免这种问题，我们应该尽量使用简单的属性名，或者使用单引号或双引号将属性名括起来。

3. 避免过度使用 ng-init

虽然 ng-init 可以帮助我们在页面加载时初始化数据，但是过度使用它会导致代码难以维护。因此，我们应该尽量避免在 ng-init 中编写复杂的逻辑，而是将复杂的逻辑放到控制器中。

示例代码

下面是一个完整的示例代码，演示了如何在 AngularJS 中使用 ng-init 初始化数据：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>ng-init 示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
  <div ng-init="name = 'Tom'; age = 18;">
    <p>我的名字是 {{name}}，我今年 {{age}} 岁。</p>
  </div>
  <input type="text" ng-model="name" ng-init="name = 'Tom'">
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.name = 'Tom';
      $scope.age = 18;
    });
  </script>
</body>
</html>

在这个示例代码中，我们定义了一个名为 myApp 的 AngularJS 应用，然后定义了一个名为 myCtrl 的控制器。在控制器中，我们初始化了两个变量 name 和 age，分别赋值为 'Tom' 和 18。然后，在 HTML 中，我们使用 ng-init 指令来初始化这两个变量，并使用双花括号语法来显示它们的值。同时，我们还在一个输入框中使用了 ng-init 指令，将输入框中的值初始化为 'Tom'。最后，我们将控制器与页面绑定起来，使得 AngularJS 能够自动更新页面中的数据。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d4e58ca941bf7134921426

AngularJS 中使用 ng-init 初始化数据的方法详解