AngularJS指令

关注

原创最新推荐文章于 2026-03-05 00:10:09 发布 412 阅读 AI 写同款· GEO 优化 ›

AngularJS 指令 AngularJS 指令是构建动态网页的重要工具。通过掌握指令的概念、类型、用法以及注意事项，开发者可以轻松地创建丰富的用户界面。在实际开发过程中，请务必遵循最佳实践，以确保代码的可维护性和可扩展性。阅读详情

经过AngularJS的入门之旅后，产生很大的兴趣，今天我们就来聊聊AngularJS的指令，也会有很多的惊喜来等着我们发现.......

AngularJS的指令有很多我们先聊聊几个重要的指令吧！！！

1.ng-app指令

用于启动AngularJS应用程序,根模块：通过ng-app的属性值来指定【指定的是名称】--指定了一个myApp的模块

<html ng-app="myApp">

注：一定要记得引入AngularJS框架哦！！！

<script src="js/lib/AngularJS/angular.min.js"></script>

2.ng-controller指令

通过ng-controller来将控制器和对应的标签绑定，定义好了控制器的作用范围【开始标签~结束标签之间】

<div ng-controller="myCtrl" ng-init="count=1">
   .....
</div>

3.ng-init指令

ng-init这个东西，主要用来在标签中初始化一些变量数据【不推荐】

<div ng-controller="myCtrl" ng-init="count=1"></div>

4.ng-module指令

将数据动态的双向绑定，即在表单里输入内容，在页面上显示的内容会随之输入框中内容的改变而改变

例如：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
    <div ng-controller="myCtrl">
        <input type="text" ng-model="hello">
        {{hello}}
    </div>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl", function($scope){
            $scope.hello = "hello angularjs! 今天开始学习js高级开发的部分"
        });
    </script>
</body>
</html>

通过ng-model指令降自定义的$scope.hello内容与input里的内容动态的绑定，当你改变input你的内容时，在页面渲染出的{{hello}}的内容也会随之改变。

ng-model 指令也可以：

为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

5.ng-click指令

ng-click指令允许您指定自定义行为当一个元素被点击。

<button ng-click="click()"></button>

给button绑定一个点击事件，等你点击吃按钮是才能触发事件。

6.ng-repeat指令

每个模板实例都得到它自己的作用域，其中给定的循环变量设置为当前集合项，并且将$索引设置为项索引或键。

通常与ul,li,table结合使用。

例如：

<!--html代码-->

<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="js/bootstrap.min.css">
<script src="js/angular.min.js"></script>
</head>

<body>
<div class="container" ng-controller="myCtrl">
	<div class="row">
		<div class="col-md-8 col-md-offset-2">
			<div class="page-header">
				<h2>我的购物车</h2>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-8 col-md-offset-2">
			<table class="table table-hover table-striped">
				<tr>
					<th>#</th>
					<th>商品名称</th>
					<th>商品单价</th>
					<th>购买数量</th>
					<th>小计金额</th>
					<th>操作</th>
				</tr>
				<tr ng-repeat="g in goodses">
					<td><span ng-bind="g.goodsID"></span></td>
					<td><span ng-bind="g.goodsName"></span></td>
					<td>￥<span ng-bind="g.goodsPrice"></span></td>
					<td><input type="text" ng-model="g.count"></td>
					<td>￥<span ng-bind="g.goodsPrice * g.count"></span></td>
					<td><a href="#">删除</a></td>
				</tr>
				<tr>
					<td>总计金额：<span ng-bind="total"></span></td>
				</tr>
			</table>
		</div>
	</div>
</div>

<!--js代码-->

<script>
	var app = angular.module("myApp", []);
	
	app.controller("myCtrl", function($scope) {
		$scope.goodses = [/*后端接口返回的json数据*/
			{goodsID:1, goodsName:"商品A", goodsPrice:12, count:1, subtotal:12},
			{goodsID:2, goodsName:"商品B", goodsPrice:32, count:1, subtotal:32},
			{goodsID:3, goodsName:"商品C", goodsPrice:56, count:1, subtotal:56}
		];
		
		
		
		$scope.$watch("goodses", function() {
			
			$scope.total = 0;/*总计金额*/
			for(var i = 0; i < $scope.goodses.length; i++) {
				$scope.total += $scope.goodses[i].goodsPrice * $scope.goodses[i].count;
			}
			
		}, true);
	});
	</script>
</body>
</html>

在页面中显示的效果为：

：

如你看到的图片的效果一样，我们通过ng-reap指令把购物车里的商品循环的输出渲染到页面中，这样大大的减少了我们html里的代码量。

7.ng-style指令

可以修改css样式

html代码：

<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>

js代码：

var colorSpan = element(by.css('span'));

it('should check ng-style', function() {
  expect(colorSpan.getCssValue('color')).toBe('rgba(0, 0, 0, 1)');
  element(by.css('input[value=\'set color\']')).click();
  expect(colorSpan.getCssValue('color')).toBe('rgba(255, 0, 0, 1)');
  element(by.css('input[value=clear]')).click();
  expect(colorSpan.getCssValue('color')).toBe('rgba(0, 0, 0, 1)');
});

css代码：