angularJS指令
https://github.com/xiangchaoChina/angularJs-Demo/tree/master/Directive-demo‘>本章案例:https://github.com/xiangchaoChina/angularJs-Demo/tree/master/Directive-demo
什么是指令
- 扩展html属性
- 给程序赋予新功能
- 自定义属性
本章内容
数据绑定
- ng-bind
- ng-bind-template
- ng-bind-html
ng-bind
html部分代码:
用户名:{{username}}<br> 密码:{{password}}<br> 邮箱:{{email}}<br>
module部分代码:
//初始化数据 $scope.username="达摩"; $scope.password="shijiamoni"; $scope.email="00000@rulai.com";
以上html部分的内容在正常情况下没有任何反应,当网速卡的时候我们的页面上会只显示出{{username}}这样的字符串,而不会将其当作angularJS的表达式进行解析。也就是所谓的‘闪屏’;这个时候我们可以使用ng-bind去解决此现象。
解决方案一:属性绑定
<p ng-bind="username"></p>
解决方案二:类绑定
<p class="ng-bind:password"></p>
如何绑定多个值?
- ng-bind
- ng-bind-template
- ng-bind-html
如果希望绑定多个值,我们就的借助另一个指令ng-bind-template;
解决方案
<p ng-bind-template="尘名:{{username}}.得道密码:{{password}}.联系我:{{email}}.生平简介:{{details}}"></p>
可以看出在绑定的时候我们还可以去使用字符串给输出进行格式化。
如何绑定html元素
- ng-bind
- ng-bind-template
- ng-bind-html
绑定html元素时,如果我们直接按照下面的例子去绑定不会正常给我们显示。
html
<div ng-bind-html="label">
</div>
angular
angular.module("myapp",[])
.controller("ctrl1",function ($scope,$interval) {
//准备标签
$scope.label="<p>你好,欢迎来到大雷音寺</p>";
})
以上问题的解决方案。我们需要导入angular-sanitize.js文件去进行功能新增。
JS下载路径:https://github.com/xiangchaoChina/resources/tree/master/js/angularJs
在需要使用ng-bind-html的页面把sanitize导入。
<script src="js/angular-sanitize.js"></script>
接着在相应的模块去引用’ngSanitize’
angular.module("myapp",['ngSanitize'])
以上步骤完毕.在去使用ng-bind-html就大功告成!
数组赋值和遍历
- ng-list
- ng-repeat
如何完成使用文本输入框给angularJs中数组赋值的工作。
我们可以在脑海想象这样一个画面。一个简单的html页面。第一行是一个文本输入框,其绑定(ng-model)了一个数组名array。接着在下方通过表达式{{array}}输出。然后我们在输入框输入值,每次输入时就相当于给数组添加了一个新值。然后输入逗号来进行下一个值的输入。如果想要文本框具有这样的功能,ng-list就出现了。
<input ng-model="array" ng-list>
{{array}}
上述的代码,现在己经具有了刚才我们描述的功能。默认的分割符号时逗号。我么可以通过ng-list=“-”来将分隔符重新设置为-
- ng-list
- ng-repeat
当我们现在从后台拿出一个对象数组时,想要显示在html页面上时。就需要借助ng-repeat
用法
html代码
<ul>
<li ng-repeat="item in objArr">{{item.name}}</li>
</ul>
预定义数据
angular.module("myapp",[])
.controller("ctrl1",function ($scope) {
$scope.objArr=[];
$scope.objArr.push({name:'张翠山'})
$scope.objArr.push({name:'张翠山'})
});
在html代码部分,ng-repeat部分的内容我们可以这样理解:
in后为数组,将数组中从下标从0的开始,一项一项的往出取,每次都临时存储在item中。我们可以通过item来操作每一项。
元素控制
- ng-open
- ng-href
- ng-src
- ng-if
- ng-show
- ng-hide
- ng-switch
控制元素是否展示之一
ng-open:
true:显示
false:隐藏
<details ng-open="true">
<summary>点击查看</summary>
<p>
<a ng-href="{{imgHref}}">
<img ng-src="{{imgSrc}}">
</a>
</p>
路径问题
ng-href:angular 用表达式直接将值绑定到href属性当中,如果angular在绑定值之前用户点击链接,将跳转错误的地址,ngHref指令就是为了解决这个问题
ng-src:和href类似,但src中写的{{}}有可能被浏览器替代.ng-src解决了此问题
控制元素是否展示之二
- ng-if
- ng-show
- ng-hide
ng-if:是否删除包含元素
true:不删除
false:删除
案例:
<div ng-if="true">
张三丰:...................
</div>
ng-show:是否显示元素
true:显示
false:不显示
<div ng-hide="true">
张君宝:...................
</div>
ng-hide:是否隐藏元素
true:隐藏
false:不隐藏
<div ng-hide="true">
张无忌:...................
</div>
交互效果
- ng-disabled
- ng-checked
- ng-readonly
ng-disabled:是否禁用
true:禁用
false:不禁用
<input ng-disabled="disabled" type="radio" name="sex">男
<input ng-disabled="disabled" type="radio" name="sex">女
ng-checked:是否选中(单选框/多选框)
true:选中
false:不旋踵
<input type="checkbox" ng-checked="check">
ng-readonly:是否只读
true:只读
false:可写入
<input ng-readonly="readonly">
元素内容改变事件
- ng-change
ng-change:元素内容发生改变时的监听事件,
通常,我们需要在select,textarea等元素内容发生改变时,对其值做监听。这时候,我们就可以在controller中定义一个方法。让ng-change绑定这个方法。下面以一个简单的案例看一下
html
<body ng-controller="ctrl1">
<textarea maxlength="1000" cols="50" rows="10" ng-model="content" ng-change="change()">
</textarea>
<p>已输入{{inNum}}字,还可以输入{{sxNum}}字</p>
angularJs
$scope.content="";//用户输入的值
$scope.inNum = 0;//已输入
$scope.sxNum = 1000;//剩下
$scope.change=function () {
console.log("--")
$scope.inNum = $scope.content.length;
$scope.sxNum = 1000 - $scope.inNum;
}
页面布局
- ng-include
ng-include:页面布局
案例-节点方式:
<ng-include src='页面路径'>
</ng-include>
案例-属性方式:
<div ng-include='页面路径'></div>
https://github.com/xiangchaoChina/angularJs-Demo/tree/master/Directive-demo‘>本章案例:https://github.com/xiangchaoChina/angularJs-Demo/tree/master/Directive-demo