AngularJs指令
2017-03-14 本文已影响30人
不要和我名字一样
HTML在构建应用（App）时存在诸多不足之处，AngularJS通过扩展一系列的HTML属性或标签来弥补这些缺陷，所谓指令就是AngularJS自定义的HTML属性或标签，这些指令都是以ng-做为前缀的，例如ng-app、ng-controller、ng-repeat等。
1、内置指令
-
ng-app:指定应用根元素，至少有一个元素指定了此元素；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs入门</title>
</head>
<body ng-app="app">
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
</body>
</html>
-
ng-controller:指定控制器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs入门</title>
</head>
<body ng-app="app">
<!--使用ng-colleroller指定一个控制器-->
<div ng-controller="DemoController">
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",["$scope",function ($scope) {
}])
</script>
</body>
</html>
-
ng-show,ng-hide,指定元素是否可见
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs入门</title>
</head>
<body ng-app="app">
<!--使用ng-colleroller指定一个控制器-->
<!--ng-show,true显示、false不显示-->
<div ng-controller="DemoController" ng-show="false">
AngularJs指令,被隐藏了
</div>
<!--ng-hide,false显示、true不显示-->
<div ng-hide="false">
AngularJs指令,没有被隐藏
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",["$scope",function ($scope) {
}])
</script>
</body>
</html>
ng-show,ng-hide
-
ng-model:把元素值（比如输入域的值）绑定到应用程序。
-
ng-init:初始化数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs入门</title>
</head>
<body ng-app="app">
<!--通过ng-init,初始化quantity=1;price=5-->
<div ng-app="" ng-init="quantity=1;price=5">
<h2>价格计算器</h2>
数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">
<p><b>总价：</b> {{ quantity * price }}</p>
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",["$scope",function ($scope) {
}])
</script>
</body>
</html>
ng-model,ng-init
-
ng-repeat:循环遍历数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs入门</title>
</head>
<body ng-app="app" ng-controller="DemoController">
<ul>
<!--通过ng-repeat遍历数据-->
<li ng-repeat="info in infos">
<div>姓名：{{info.name}}，年龄：{{info.age}}</div>
</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",["$scope",function ($scope) {
$scope.infos = [
{'name':'张三',age:20},
{'name':'李四',age:21},
{'name':'王五',age:22},
{'name':'赵六',age:23},
]
}])
</script>
</body>
</html>
ng-repeat循环遍历
2、自定义指令
当我们在开发的时候，AngularJs的指令无法满足我们的需求时，我们就要自定义指令,通过angular全局对象下的directive方法实现
var App = angular.module('App', []);
// 通过模块实例对象的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
}
});
