02-angularJs指令

来源：互联网发布：p2p网络运营招聘编辑：程序博客网时间：2024/06/18 13:27

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

0 0