AngularJS ng-controller 指令详解及示例

作者 : 慕源网 本文共1527个字,预计阅读时间需要4分钟 发布时间: 2022-05-3 共282人阅读

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

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录