极客教程如何在页面加载时执行AngularJS控制器功能
在这篇文章中，我们将看到如何使用AngularJS在页面加载时执行/调用一个JS函数。这个函数可以用来执行初始化。在AngularJS中，在页面加载时调用一个函数或初始化一个值是非常容易的。AngularJS为我们提供了一个专门的指令来完成这一特定任务。它就是ng-init指令。
语法:
<element ng-init="function()">
Contents...
</element>
例子1：在这个例子中，我们将在页面加载时调用一个函数来初始化一个变量。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
</head>
<body ng-controller="MyController">
<!-- calling the firstFunction to
initialize gfg variable -->
<center ng-init="firstFunction(this)">
<!-- gfg variable with no value initially -->
<h1 style="color: green;">{{gfg}}</h1>
</center>
</body>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MyController',
['scope', function(scope) {
// Function to be called on page load
scope.firstFunction = function(scope) {
// We need scope argument as we are
// altering the variables defined in
// thescope
$scope.gfg = "GeeksForGeeks"
}
}]);
</script>
</html>
输出：该函数在页面加载时被调用，变量gfg的值被设置为GeeksForGeeks。
例子2：在这个例子中，我们将把一个对象分配给变量gfg并使用它。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
</head>
<body ng-controller="MyController">
<!-- Calling the firstFunction to
initialize gfg variable -->
<center ng-init="firstFunction(this)">
<!-- gfg variable as an object -->
<h1 style="color: green;">{{gfg.name}}</h1>
<h3 style="color: green;">{{gfg.location}}</h3>
</center>
</body>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['scope',
function(scope) {
// Function to be called on page load
scope.firstFunction = function(scope) {
// We need scope argument as we are
// altering the variables defined in
// thescope
// Assigning an object to the gfg variable
$scope.gfg = {
name: "GeeksForGeeks",
location: "India"
}
}
}]);
</script>
</html>
输出：变量 “gfg “被成功初始化。
例子3：在这个例子中，我们将直接从ng-init指令中初始化一个变量。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
</head>
<body ng-controller="MyController">
<!-- initializing the gfg variable to
'GeeksForGeeks' -->
<center ng-init="gfg='GeeksForGeeks'">
<h1 style="color: green;">{{gfg}}</h1>
</center>
</body>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MyController',
['scope', function(scope) {
}]);
</script>
</html>
输出：变量gfg在页面加载时被赋予 “GeeksForGeeks “的值。