AngularJS ng-controller 指令详解及示例-慕源网

AngularJS ng-controller 指令，AngularJS中的ng-controller指令用于向应用程序添加控制器。它可用于添加方法、函数和变量，这些方法、函数和变量可在某些事件（如单击等）上调用以执行特定操作。

控制器中可以编写代码，定义函数和变量，并使用 scope 对象来访问

语法：

<element ng-controller="expression"> 内容... </element>

其中expression是指控制器的名称。

示例 1：使用 ng-controller 指令来显示输入元素。

<!DOCTYPE html>
<html>

<head>
	<title>ng-controller Directive</title>

	<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
	</script>
</head>

<body ng-app="app" style="text-align:center">
	
	<h1 style="color:green">GeeksforGeeks</h1>
	<h2>ng-controller Directive</h2><br>
	
	<div ng-controller="geek">
		Name: <input class="form-control" type="text"
				ng-model="name">
		<br><br>
		
		You entered: <b><span>{{name}}</span></b>
	</div>
	
	<script>
		var app = angular.module('app', []);
		app.controller('geek', function ($scope) {
			$scope.name = "geeksforgeeks";
		});
	</script>
</body>

</html>

输出：

示例二：使用 ng-controller 指令来显示点击按钮后的内容。

<!DOCTYPE html>
<html>

<head>
	<title>ng-controller Directive</title>

	<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
	</script>
</head>

<body ng-app="app" style="text-align:center">

	<h1 style="color:green">GeeksforGeeks</h1>
	<h2>ng-click Directive</h2>
	
	<div ng-controller="app">
		
		<button class="btn btn-default" ng-click="best()">
			Button 1
		</button>
		
		<button class="btn btn-primary" ng-click="notbest()">
			Button 2
		</button><br>
		
		<p>Quick sort is <b>{{res}}</b>.</p>
	</div>
	
	<script>
		var app = angular.module('app', []);
		app.controller('app', function ($scope) {
			$scope.best = function () {
				return $scope.res = "best";
			};
			$scope.notbest = function () {
				return $scope.res = "not always good";
			};
		});
	</script>
</body>

</html>

输出：

点击前：

点击按钮2后：

AngularJS ng-controller 指令详解及示例

常见问题FAQ

慕源网普通

发表评论取消回复

常见问题FAQ

慕源网 普通

发表评论 取消回复

相关推荐

慕源网普通

发表评论取消回复