AngularJS常用指令

最新推荐文章于 2024-05-13 14:54:25 发布

原创最新推荐文章于 2024-05-13 14:54:25 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularJS

笔记专栏收录该内容

55 篇文章

订阅专栏

本文深入讲解AngularJS中关键指令的使用方法，包括ng-app、ng-model、ng-init、ng-controller等，以及它们如何影响页面的渲染和交互。同时，探讨了AngularJS在控制层和服务层的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AngularJS指令

语法：{{变量}}

ng-app=“模块名” : 启动引擎
有ng-app就可以使用angularJS
如果ng-app里面有指定模块名，意思是用指定的模块进行处理页面。

ng-model=“变量”: 用来双向绑定的
只能用在

ng-init=“js语句” : 初始化
当页面加载完成就执行

ng-controller=“demoConroller” : 指定这个控制器的控制范围

ng-if=“boolean表达式” ：控制标签是否显示

ng-click=“js语句” : 单击事件

ng-repeat=“obj in arr” : 表示循环
obj - 循环变量
arr - 要循环的集合
$index - 表示循环索引下标

ng-options=“obj.id as obj.text for obj in arr” 主要加在select标签上，添加option标签
arr - 表示数据集合
obj - 循环变量
obj.id,obj.text 表示变量的两个属性
obj.id as obj.text 表示obj.id是option标签的value值，obj.text是option标签文本值。

	<select id="p">
		<option value="1">湖北</option>
		<option value="4">河南</option>
	</select>

ng-bind-html=“值” ：把值添加到ng-bind-html所在标签内部。

控制层：
var app = angular.module(“pyg”,[]);
app.controller(“demoConroller”,function($scope){
// 主要完成的是操作页面
});

app.service("demoService",function($http){
	// 主要完成连接后台
})

app.filter('trustHtml',function(){
	return function(data){
		//这是一个过滤器，data表示要过滤的内容
		return data+"!";
	}
});
	// 使用过滤器   内容 | 过滤器的名字


$sce  : 表示安全认证(动态的JS，动态的html)

	$http --- Controller.java 
	$sce.trustAsHtml("<span>")

$scope : 表示页面对象。
	变量监控的方法
	$scope.$watch("变量名",function(newValue,oldValue){
		//TODO ...
	});
$http  : 表示ajax请求对象。
	$http.get("url").success(function(data){
		//TODO ....
	});
	$http.post("url",obj).success(function(data){
		//TODO ....
	});
	data - 表示向后台请求回的数据。