AngularJS——第3章指令

第3章指令

所谓指令就是AngularJS自定义的HTML属性或标签，这些指令都是以ng-做为前缀的，例如ng-app、ng-controller、ng-repeat等。

3.1 内置指令

ng-app 指定应用根元素，至少有一个元素指定了此属性。
ng-controller 指定控制器
ng-show控制元素是否显示，true显示、false不显示
ng-hide控制元素是否隐藏，true隐藏、false不隐藏
ng-if控制元素是否“存在”，true存在、false不存在
ng-src增强图片路径
ng-href增强地址
ng-class控制类名
ng-include引入模板
ng-disabled表单禁用
ng-readonly表单只读
ng-checked单/复选框表单选中
ng-selected下拉框表单选中
【示例1】

<body ng-app="App">  <!--指定应用根元素，至少有一个元素指定了此属性-->

<!--由于浏览器加载顺序问题，显示内容时会产生闪烁-->

	<ul ng-controller="DemoController">  <!--定义控制器-->
		<li ng-bind="name">绑定数据变量，显示结果与{{name}}一样</li>
		<li>{{name}}</li>
		<li ng-show="1">ng-show用来显示过程隐藏内容的，当值为true时显示</li>
		<li ng-hide="1">ng-hide用来隐藏内容，当值为true时隐藏</li>
		<li ng-if="1">ng-if用来控制元素是否存在，当值为true时存在</li>
		<li><img ng-src="{{path}}" alt="">ng-src用来增强图片路径，使用ng-src而不适用src的原因是src在页面从上到下加载时就会直接请求src的资源，如果所给的是像path这样的变量路径，那么在第一次请求之后没有请求到需要的内容，在执行到script时还会再加载一遍，浪费资源，而ng-src不会直接被浏览器识别，只有在script的内容加载玩后才会显示，href同理</li>
		<li ng-class="{red:true}">控制类名：ng-class="{}"中单括号表示对象</li>
	</ul>

	<script src="./libs/angular.min.js"></script>
	<script>

		//创建Model
		var App = angular.module('App', []);
		
		//Controller
		App.controller('DemoController', ['$scope', function ($scope) {

		    //$scope
			$scope.name = 'itcast';
			$scope.path = './images/author.jpg';
			$scope.link = '#';
			$scope.red= 'red';

        }]);

	</script>
</body>

【示例2】ng-include

<body ng-app="App">

	<div ng-include="'./header.html'"></div>

	<section>主体</section>

	<div ng-include="'./footer.html'"></div>

	<script src="./libs/angular.min.js"></script>
	<script>

		var App = angular.module('App', []);

	</script>
</body>

3.2 自定义指令

语法：App.directive('tag', function(){});
示例：

// 通过模块实例对象的directive方法可以自定义指令
App.directive('tag', function () {

	// 返回一个对象，这个对象就是自定义指令相关的内容
	return {
		// E element——元素
		// A attribute——属性
		// C class——类
		// M mark replace——备注，必须为true
		restrict: 'ECMA',
		// template: '<ul><li>首页</li><li>列表</li></ul>',
		templateUrl: './list.html'
		// replace: true
	}

});

posted on 2018-03-11 16:47 luoyu113 阅读(117) 评论(0) 收藏举报

第3章 指令

3.1 内置指令

3.2 自定义指令

第3章指令