<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 指令</title>
</head>
<!-- #指令
HTML在构建应用(App)时存在诸多不足之处,
AngularJS通过扩展一系列的HTML属性或标签来弥补这些缺陷,
所谓指令就是AngularJS自定义的HTML属性或标签,
这些指令都是以ng-做为前缀的,例如ng-app、ng-controller、ng-repeat等。
-->
<body>
<!-- 由于angular指令太多 下面只介绍常用内置指令
内置指令
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下拉框表单选中
-->
<ul ng-controller="DemoController">
<li ng-bind="name"></li>
<li>{{name}}</li>
<li ng-show="1">ng-show用来显示或隐藏内容的,当值为true时显示</li>
<li ng-hide="0">ng-hide用来显示或隐藏内容的,当值为true时隐藏</li>
<li ng-if="1">ng-if用来控制元素是否存在,当值为true时存在{{name}}</li>
<li><img ng-src="{{path}}" alt=""></li>
<li ng-class="{red: true, blue: true}">ng-class指令</li>
<li><input type="text" ng-disabled="0"></li>
<li><input type="text" ng-readonly="1" value="angular"></li>
<li><input type="checkbox" ng-checked="1">男</li>
<li>
<select name="" id="">
<option value="">河北省</option>
<option value="">山东省</option>
<option value="" ng-selected="1">北京市</option>
</select>
</li>
</ul>
<script src="./libs/angular.min.js"></script>
<script>
// 创建模块
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
// $scope
$scope.name = '张飞';
$scope.path = './images/author.jpg';
$scope.link = './main.css';
}]);
//-------------------------自定义属性-------------------
//AngularJS允许根据实际业务需要自定义指令,
//通过angular全局对象下的directive方法实现。
var App = angular.moudle('App', []);
//指定指令
App.directive('tag',function(){
return{
// 自定义指令的类型:E element,A attribute,C class,M mark ,replace必须为true ECMA
restrict:'EA',
//是否替换原有标签
replace:'true',
//指令模板
template:'<h1>hello angular</h1>',
//指令外部模板
//templateUrl:'header.html'
}
})
</script>
</body>
</html>
AngularJs常见内置指令 自定义指令
最新推荐文章于 2019-07-24 11:28:50 发布