02-angularJs指令
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}}
密码:{{password}}
邮箱:{{email}}
module部分代码:
//初始化数据 $scope.username="达摩"; $scope.password="shijiamoni"; $scope.email="00000@rulai.com";
以上html部分的内容在正常情况下没有任何反应，当网速卡的时候我们的页面上会只显示出{{username}}这样的字符串,而不会将其当作angularJS的表达式进行解析。也就是所谓的‘闪屏’;这个时候我们可以使用ng-bind去解决此现象。
解决方案一:属性绑定
解决方案二:类绑定
如何绑定多个值？
- ng-bind
- ng-bind-template
- ng-bind-html
如果希望绑定多个值,我们就的借助另一个指令ng-bind-template；
解决方案
可以看出在绑定的时候我们还可以去使用字符串给输出进行格式化。
如何绑定html元素
- ng-bind
- ng-bind-template
- ng-bind-html
绑定html元素时,如果我们直接按照下面的例子去绑定不会正常给我们显示。
html
angular
angular.module("myapp",[])
.controller("ctrl1",function ($scope,$interval) {//准备标签$scope.label="你好,欢迎来到大雷音寺
";
})
以上问题的解决方案。我们需要导入angular-sanitize.js文件去进行功能新增。
JS下载路径:https://github.com/xiangchaoChina/resources/tree/master/js/angularJs
在需要使用ng-bind-html的页面把sanitize导入。
接着在相应的模块去引用’ngSanitize’
angular.module("myapp",['ngSanitize'])
以上步骤完毕.在去使用ng-bind-html就大功告成！
数组赋值和遍历
- ng-list
- ng-repeat
如何完成使用文本输入框给angularJs中数组赋值的工作。
我们可以在脑海想象这样一个画面。一个简单的html页面。第一行是一个文本输入框,其绑定(ng-model)了一个数组名array。接着在下方通过表达式{{array}}输出。然后我们在输入框输入值,每次输入时就相当于给数组添加了一个新值。然后输入逗号来进行下一个值的输入。如果想要文本框具有这样的功能，ng-list就出现了。
{{array}}
上述的代码,现在己经具有了刚才我们描述的功能。默认的分割符号时逗号。我么可以通过ng-list=“-”来将分隔符重新设置为-
- ng-list
- ng-repeat
当我们现在从后台拿出一个对象数组时,想要显示在html页面上时。就需要借助ng-repeat
用法
html代码
- {{item.name}}
预定义数据
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:隐藏
点击查看
![]()
路径问题
ng-href:angular 用表达式直接将值绑定到href属性当中，如果angular在绑定值之前用户点击链接，将跳转错误的地址，ngHref指令就是为了解决这个问题
ng-src:和href类似，但src中写的{{}}有可能被浏览器替代.ng-src解决了此问题
控制元素是否展示之二
- ng-if
- ng-show
- ng-hide
ng-if:是否删除包含元素
true:不删除
false:删除
案例:
张三丰:...................
ng-show:是否显示元素
true:显示
false:不显示
张君宝:...................
ng-hide:是否隐藏元素
true:隐藏
false:不隐藏
张无忌:...................
交互效果
- ng-disabled
- ng-checked
- ng-readonly
ng-disabled:是否禁用
true:禁用
false:不禁用
男
女
ng-checked:是否选中(单选框/多选框)
true:选中
false:不旋踵
ng-readonly:是否只读
true:只读
false:可写入
元素内容改变事件
- ng-change
ng-change:元素内容发生改变时的监听事件,
通常,我们需要在select,textarea等元素内容发生改变时,对其值做监听。这时候,我们就可以在controller中定义一个方法。让ng-change绑定这个方法。下面以一个简单的案例看一下
html
已输入{{inNum}}字,还可以输入{{sxNum}}字
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:页面布局
案例-节点方式:
案例-属性方式:
https://github.com/xiangchaoChina/angularJs-Demo/tree/master/Directive-demo‘>本章案例:https://github.com/xiangchaoChina/angularJs-Demo/tree/master/Directive-demo
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！