今天要说的是AngularJS里面的指令
AngularJs第三讲
指令:就是扩展了HTML的基本功能,通过额外的标签、属性来增强HTML功能,按照常见的指令,可以把指令划分为五大类,分别是控制指令、渲染指令、节点指令、事件指令、其他指令。。。。
1、控制指令:用于ANGULAR应用程序加载流程控制
2、渲染指令:用于ANGULAR将数据在网页中进行展示或隐藏处理
3、节点指令:用于ANGULAR标签、属性、样式内容进行处理的指令
4、事件指令:用于ANGULAR处理常规事件操作的指令
分析各个指令的用法
1、控制指令
1、控制指令-ng-app:
ng-app用于ANGULAR应用程序入口的指令,用于【自动引导】ANGULAR程序的运行,在定义应用程序运行入口的同时,可以绑定一个DOM元素,而DOM元素的开始标签和结束标签之间就可以认定为模块的作用域范围。
Angular通过ng-app指令,实现自动引导运行,底层是通过Bootstrap()进行模块加载,开始运行。
在这里有个重要的问题要说,ng-app没有模块,Angular也是阔以运行哒!Angular会将页面上出现的支持的语法进行解释运行!但是。但是。但是。重要的问题说三遍,不能使用模块控制器中定义的或者挂载的数据,因为超出了范围。
ng-app="模块名称",该模块作为模块控制器的根模块出现,整个作用范围中,页面View和数据Model可以进行无缝交互
1、控制指令-ng-controller:
ng-app模块中,可以有多个控制器,挂载好的控制器在当前模块范围内,可以通过ng-controller指令来控制指定控制器的作用范围。
ng-controller的做法为:
(1)首先要先声明模块
(2)模块下挂载控制器
(3)设置挂载控制器的数据
var app=angular.module("myApp",[])
myApp为模块
app.controller("myCtrl",function($scope){
myCtrl为模块控制器
$scope.name=""
$scope.挂载数据
})
以下为例子
<body>
<!-- name被Angular解释为变量,'tom'被解释为变量值 -->
<!-- name2被Angular解释为变量,n2被解释为变量-->
<div ng-init="name='tom';name2=n2">
{{name}}**{{name2}}
<div>greeting: <span ng-bind="greeting"></span></div>
</div>
<!-- 控制器 -->
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div>局部控制器范围:<span ng-bind="greeting"></span></div>
</div>
<div ng-controller="myCtrl2">
<div>局部控制器范围:<span ng-bind="greeting"></span></div>
</div>
</div>
<div id="myApp2">
<div ng-controller="myApp2Ctrl">
<div>局部控制器App2范围:<span ng-bind="hello"></span></div>
</div>
<div ng-controller="myCtrl2">
<div>局部控制器范围:<span ng-bind="greeting"></span></div>
</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl" , ["$scope", function($scope){
$scope.greeting = "hello ng-app!"
}]);
app.controller("myCtrl2" , ["$scope", function($scope){
$scope.greeting = "hello ng-app!"
}]);
var app2 = angular.module("myApp2", []);
app2.controller("myApp2Ctrl", ["$scope",function($scope) {
$scope.hello = "my app2 ctrl value!";
}]);
var _mp2 = document.getElementById("myApp2");
angular.bootstrap(_mp2, ["myApp2"]);
</script>
</body>
2、渲染指令:指令的作用就是将数据,渲染展示到页面上【底层是封装了DOM操作】
1、渲染指令-ng-repeat:
循环渲染指令,属性直接写在循环的标签上
根据理解的需要,我例举了循环的几个例子供参考
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>循环练习</title>
<script src="js/angular.min.js"></script>
<style>
a {
text-decoration: none;
color: darkred;
}
</style>
</head>
<body ng-controller="myCtrl">
<ul>
字符串循环
<li ng-repeat="str in strs">
<span ng-bind="str"></span>
</li>
</ul>
<hr/>
<ul>
<li ng-repeat="obj in objs">
<span ng-bind="obj.name"></span>
<span ng-bind="obj.age"></span>
</li>
</ul>
<ul>
<li ng-repeat="goods in goodses">
<span ng-bind="goods.goodsID"></span>
<span ng-bind="goods.goodsName"></span>
<span ng-bind="goods.goodsPrice"></span>
</li>
</ul>
<hr/>
<ul>
<li ng-repeat="user in users">
<span ng-bind="user.userID"></span>
<span ng-bind="user.userName"></span>
<span ng-bind="user.address.native"></span>
<span ng-bind="user.address.province"></span>
<span ng-bind="user.address.country"></span>
</li>
</ul>
</body>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function ($scope) {
$scope.strs=[
"a","b","c"
]
$scope.objs=[
{name:"聂悦",age:15},
{name:"小花",age:12}
]
$scope.goodses=[
{goodsID:1,goodsnName:"商品A",goodsPrice:122},
{goodsID:2,goodsnName:"商品B",goodsPrice:133},
{goodsID:3,goodsnName:"商品C",goodsPrice:144},
]
$scope.users=[
{userID:1,userName:"nieyue",address:{native:"中国",province:"商丘",cuntry:"睢县"}},
{userID:1,userName:"yantao",address:{native:"中国",province:"商丘",cuntry:"民权"}}
]
});
</script>
</html>
2、渲染指令-ng-bind
ng-bind 变量渲染指令,mustache语法的替代写法
以下为ng-bind可以绑定内容的例子
<div ng-bind="content"></div> //为任何内容 <div ng-bind="12 * 12"></div> //为数字 <div ng-bind="true && false"></div> //为布尔值 <div ng-bind="12 > 10"></div> //判断大小
<script> var app = angular.module("myApp", ['ngSanitize']); app.controller("myCtrl", ["$scope", function ($scope) { $scope.content = "<p>这是一段内容</p>"; //会显示<p></p>标签 }]); </script>
2、渲染指令-ng-bind-html
这个指令,类似于原生JS的innerHTML
但是使用的时候一定要慎重,对于它修饰的内容,必须确保安全性
如果内容的来源不确定,不要使用编译html标签的属性或者函数
以下为ng-bind-html可以绑定内容的例子
<div ng-bind-html="content"></div> <div ng-bind-html="12 * 12"></div> <div ng-bind-html="true && false"></div> <div ng-bind-html="12 > 10"></div>
</script><script> var app = angular.module("myApp", ['ngSanitize']); app.controller("myCtrl", ["$scope", function ($scope) { $scope.content = "<p>这是一段内容</p>"; //不会显示<p></p>标签 }]);
2、渲染指令ng-bind-incloude
包含页面指令,类似于JQuery 中的load()函数,用于加载其他页面
3、节点指令
3、节点指令ng-switchng-switch-指令,类似于JQuery 中的switch-case
ng-switch===>switch();ng-switch-when===>case;ng-switch-default===>default;以下为例3、节点指令ng-hide或ng-show<div> <input type="text" ng-model="user"><!-- user变量 --> <div ng-switch="user"><!-- user变量 --> <div ng-switch-when="admin"><!-- admin字符串 --> 管理员用户登录 </div> <div ng-switch-when="user"><!-- user字符串 --> 会员登录 </div> <div ng-switch-default> 游客登录 </div> </div> </div>
ng-hide或ng-show指令:用于显示隐藏或显示元素的指令。
以下为例<div> <input type="checkbox" ng-model="flagy">显示?{{flagy}} <div ng-show="flagy">圆规为什么可以画圆,因为,脚在走,心不动</div> <div ng-hide="flagy">你为什么不能圆梦,因为,心不定,脚不动!</div> </div>
3、节点指令ng-if
ng-if指令:用于判断输出,会将DOM元素从DOM树上移除或显示。
以下为例
3、节点指令ng-class<div> <input type="checkbox" ng-model="flagx">用户登录{{flagx}} <div ng-if="flagx" ng-class="'sky'"> </div> </div>
ng-class指令:{{样式名称:布尔类型}}
以下为例
<style> .default{ font-size:16px; color:#888; } .sky { font-size:18px; color:#2aabd2; } </style>
<div> <div ng-class="{default:def,sky:s}"> 天地不仁以万物为刍狗 </div> <input type="checkbox" ng-model="def">使用default样式修饰{{def}}<br /> <input type="checkbox" ng-model="s">使用sky样式修饰{{s}}<br /> </div> <div> <!-- [样式class名称] [使用较多:熟悉]--> <div ng-class="['sky']"> 圣人不仁以百姓为刍狗 </div> </div> <div> <!-- 通过flag为true/false来指定使用样式default/sky[使用不多:了解] --> <div ng-class="{true:default,false:sky}[flag]"> 道可道非常道,名可名非常名<br /> 无名天地之始有名万物之母 </div> <input type="checkbox" ng-model="flag">选中{{flag}} </div> 3、节点指令ng-class-even/odd
ng-even/odd指令:偶数或奇数来改变
以下为例
<div> <ul> <li ng-repeat="u in users"> <span ng-bind="u" ng-class-even="'default'" ng-class-odd="'sky'"></span> </li> </ul> </div><style> .default{ font-size:16px; color:#888; } .sky { font-size:18px; color:#2aabd2; } </style>
3、节点指令ng-style
ng-style指令:主要用于自定义指令的时候进行样式处理,常规使用方式和行内使用方式没有太大区别。
以下为例
<div>
<button ng-click="sty={color:'orange'}">点击</button>
<div ng-style="sty">
</div>
<!--<div ng-style="'{color:"red"}'">
测试
</div>-->
</div>
</div>
ng-src:用于在Angular应用中替代img标签的src属性
ng-href:用于在Angular应用中替代a标签的href属性
3、事件指令ng-click
ng-click指令:用于操作事件的指令,通常ng-[event]来命名指令,如ng-click指令。Angular事件处理,需要将对应的函数挂载到对应的控制器$scope上
以下为例<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<button ng-click="fn1()">点击执行</button>
<button ng-click="fn2($event)">点击执行,附带事件对象$event</button>
<button ng-click="fn2($event, 'tom')">点击执行,多个参数</button>
</div>
<script>
var app = angular.module("myApp", [])
.controller("myCtrl", ["$scope", function($scope) {
$scope.fn1 = function() {
alert("事件执行");
}
$scope.fn2 = function(event,name) {
console.log("事件执行了.", event, name);
}
}]);
</script>
</body>
</html>