<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>angularJS指令</title>
<!-- <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> -->
<script src="./angular.min.js"></script>
</head>
<body>
<!-- 价格计算器 -->
<!-- ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 -->
<div ng-init="quantity=1;price=5">
数量：<input type="number" ng-model="quantity">
单价：<input type="number" ng-model="price">
总价：{{ quantity * price }}
</div>
<!-- ng-repeat 指令重复一个HTML元素 -->
<div ng-init="zoology=['猴子','青蛙','老虎','狮子','大象','长颈鹿'];celebrity=[{name:'关羽',country:'蜀国',position:'上将'},{name:'孙权',country:'吴国',position:'皇帝'},{name:'典韦',country:'魏国',position:'上将'},{name:'曹操',country:'魏国',position:'太上皇'},{name:'张飞',country:'蜀国',position:'上将'},]">
<!-- 数组 -->
<ul>
<!-- ng-repeat 循环数组 -->
<li ng-repeat="x in zoology">
{{ x }}
</li>
</ul>
<!-- 对象 -->
<ul>
<li ng-repeat="x in celebrity">
{{ '名字：' + x.name +',国家：' + x.country + ',职责：' + x.position}}
</li>
</ul>
</div>
<!-- ng-model 指令也可以：
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。 -->
<!-- ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素 -->
<!-- 创建自定义指令 -->
<!-- 元素名 -->
<!-- <runoob-directive></runoob-directive> -->
<!-- 属性 -->
<!-- <div runoob-directive></div> -->
<!-- 类名 -->
<div class="runoob-directive"></div>
<!-- 注释 -->
<!-- directive: runoob-directive -->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
// 类名：你必须设置 restrict 的值为 "C" 才能通过类名来调用指令。
// restrict : "C",
// 注释
// 注意： 我们需要在该实例添加 replace 属性， 否则评论是不可见的。
// 注意： 你必须设置 restrict 的值为 "M" 才能通过注释来调用指令。
// restrict : "M",
//replace : true,
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
</html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>angularJS指令</title>
<!-- <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> -->
<script src="./angular.min.js"></script>
</head>
<body>
<!-- 价格计算器 -->
<!-- ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 -->
<div ng-init="quantity=1;price=5">
数量：<input type="number" ng-model="quantity">
单价：<input type="number" ng-model="price">
总价：{{ quantity * price }}
</div>
<!-- ng-repeat 指令重复一个HTML元素 -->
<div ng-init="zoology=['猴子','青蛙','老虎','狮子','大象','长颈鹿'];celebrity=[{name:'关羽',country:'蜀国',position:'上将'},{name:'孙权',country:'吴国',position:'皇帝'},{name:'典韦',country:'魏国',position:'上将'},{name:'曹操',country:'魏国',position:'太上皇'},{name:'张飞',country:'蜀国',position:'上将'},]">
<!-- 数组 -->
<ul>
<!-- ng-repeat 循环数组 -->
<li ng-repeat="x in zoology">
{{ x }}
</li>
</ul>
<!-- 对象 -->
<ul>
<li ng-repeat="x in celebrity">
{{ '名字：' + x.name +',国家：' + x.country + ',职责：' + x.position}}
</li>
</ul>
</div>
<!-- ng-model 指令也可以：
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。 -->
<!-- ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素 -->
<!-- 创建自定义指令 -->
<!-- 元素名 -->
<!-- <runoob-directive></runoob-directive> -->
<!-- 属性 -->
<!-- <div runoob-directive></div> -->
<!-- 类名 -->
<div class="runoob-directive"></div>
<!-- 注释 -->
<!-- directive: runoob-directive -->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
// 类名：你必须设置 restrict 的值为 "C" 才能通过类名来调用指令。
// restrict : "C",
// 注释
// 注意： 我们需要在该实例添加 replace 属性， 否则评论是不可见的。
// 注意： 你必须设置 restrict 的值为 "M" 才能通过注释来调用指令。
// restrict : "M",
//replace : true,
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
</html>