02-angularJs指令

最新推荐文章于 2024-08-18 11:06:22 发布

summercode007

最新推荐文章于 2024-08-18 11:06:22 发布

阅读量529

点赞数

分类专栏： web前端 angularJs 文章标签： html angularjs 扩展指令 directive

本文链接：https://blog.csdn.net/qq_27484333/article/details/70243102

版权

web前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

angularJs

3 篇文章 0 订阅

订阅专栏

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

summercode007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02-angularJs指令

angularJS指令https://github.com/xiangchaoChina/angularJs-Demo/tree/master/Directive-demo‘>本章案例:https://github.com/xiangchaoChina/angularJs-Demo/tree/master/Directive-demo什么是指令扩展html属性给程序赋予新功能自定义属性本章内
复制链接

扫一扫

专栏目录