AngularJS中有关Directive的汇总

本篇通过几个例子对AngularJS中的Directive进行汇总。

例子1，单向绑定和双向绑定

<html ng-app="myApp">

  <head>

    <script src="angualr.js"></script>

    <script>

        (function(){

            var name = "myApp";

            requried = [];

            myApp = null;

            myApp = angualr.module(name, requires);

            myApp.controller("AppCtrl", functioin($scope){

                $scope.contacts = [

                    {firstname: "", lastname: "'},

                    ...

                ];

                $scope.addContact = function(){

                    $scope.contacts.push({firstname:"", lastname:"", isEnabled:true});

                }

                //切换视图

                $scope.viewFile = function(){

                     if($scope.viewState){

                        return "contact_list.html";

                     } else{

                        return "contact_table.html";

                     }

                }

                $scope.onPartialLoad = function(){

                    console.log($scope.viewFile() + " loaded");

                }

            })

        }());

    </script>

  </head>

  <body ng-controller="AppCtrl">

  </body>

</html>

==单向绑定

{{contacts.length}}

<div ng-bind="contacts.length"></div>

<div ng-bind-template="">the first name is {{contacts[0].firstname}}</div>

{{contacts[0].firstname}}

{{::contacts.length}} 只展示一次数组长度，当数组长度有改变，这里不变

{{ 2 + 3 }}

{{ Math.min(4, 2)}}

<button ng-click="addContact()">添加</button>

<div ng-non-bindable>this is {{hello }}</div> 这里的{{hello}}会显示出来

...

<tr ng-repeat="contact in contacts" ng-class="$odd ? 'odd':'even'">

    <td>{{$index + 1}}</td>

    <td>{{contact.firtname}}</td>

    <td>{{contact.lastname}}</td>

    <td>{{contact.isEnabled}}</td>

    <td>{{$first}}</td>

    <td>{{$last}}</td>

    <td>{{$middle}}</td>

</tr>

...

<ng-include src="'contact_table.html'"></ng-include>

//切换视图

<input type="checkbox" ng-model="viewState">切换视图

<ng-include src="viewFile()" onload="onPartialLoad()"></ng-include>

==使用Directive的几种方式

==双向绑定

例子2，ng-switch

<html ng-app="myApp">

    <head>

        angular.js

        <script>

            (function(){

                var name = "myApp[]",

                requires = [],

                myApp = null;

                myApp = angular.module(name, requires);

                myApp.controller("AppCtrl", function($scope){

                    $scope.data = {};

                });

            }());

        </script>

    </head>

    <body ng-controller="AppCtrl">

    </body>

</html>

页面部分

<div ng-repeat="channel in ['None', 'Tv', 'kitty']"  ng-cloak>

    <input type="radio" name ="leisure" value="{{channel}}" ng-model="data.whichChannel" ng-checked="$first" />{{channel}}

</div>

<div ng-switch on="data.whichChannel">

    <div ng-switch-default>this is none</div>

    <div ng-switch-when="Tv">this is tv</div>

    <div ng-switch-when="kitty">this is kitty</div>

</div>

以上，

● ng-checked 勾选
● ng-switch切换显示其中的内容
● 当点击Tv相关的这个RadioButton,把Tv这个值赋值给了data对象的whichChannel字段，whichChannel字段值得改变会告诉ng-swich所在的div，其子元素的ng-switch-when值如果和当前的whichChannel字段值匹配，就显示
● ng-cloak 避免绑定数据的时候页面闪烁

例子3，显示、隐藏、移除元素,ng-show, ng-hide, ng-if

$scope.toggleNewContact = false;

$scope.shwoNewContactForm = function(){

    $scope.toggleNewContact = true;

}

<button ng-click="showNewContactForm()">Add New Contact</button>

<form ng-show="toggleNewContact">

    <button ng-click="toggleNewContact = false">Cancel</button>

</form>

<tr ng-repeat="contact in contacts" ng-if="contact.isEnabled">

</tr>

例子4，勾选，只读，禁用，链接

$scope.checkMe = true;

$scope.url = "http://google.com";

$scope.imgSrc = "hi.jpeg";

//勾选

<input type="checkbox" ng-checked="{{checkME}}" /> check me

//禁用按钮

<button ng-disabled="{{checkMe}}">Click me</button>

//只读

<input type="text" value="he" ng-readonly="{{checkMe}}" />

//链接

<a href="{{url}}">go</a>

<a ng-href="{{url}}">go</a> 推荐使用

//图片

<img ng-src="{{imgSrc}}"/>

例子5，ng-style

<button ng-click="styles={'color':'red'}">set color</button>

<button ng-click="styles={'font-weight':'bold'}">bold</button>

<button ng-click="styles={'font-style':'italic'}>italic></button>

<p ng-style="styles">hello</p>

例子6，ng-class

.strike{
text-decoration:line-through;
}

.bold{
font-weight:bold;
}

.red{
color:red;
}

==把一个值赋值给ng-class

//文本框和controller中的style变量绑定起来
<input type="text" ng-model="style" />
<p ng-class="style">he</p>

==把一个对象赋值给ng-class

<input type="checkbox" ng-model="deleted" /> deleted
<input tyep="checkbox" ng-model="important" /> important
<input type="checkbox" ng-model="error"> error
<p ng-class="{strike:deleted, bold:important, red:error}">hello</p>

==把一个数组赋值给ng-class

//运用所有的class
<p ng-class="['strike','bold','red']">hi</p>

另外，

例子7，事件

ng-click, ng-mousedown, ng-mouseenter, ng-mouseleave, ng-mouseup

例子8，过滤

==对数组元素过滤

$scope.courses = [

    {name:"", category:"", timeline:20, price:25},

    ...

];

$scope.getTargetDate = function(days){

    var now = new Date();

    return now.setDate(now.getDate() + days);

}

<tr ng-repeat="course in courses">

    <td>{{$index + 1}}</td>

    <td>{{course.name | upplercase}}</td>

    <td>{{course.category | lowercase }}</td>

    <td>{{getTargetDate(course.timeline) | date: 'dd MMM yy' | uppercase }}</td>

    <td>{{course.price | currency: "¥" }}</td>

    <td>{{course | json}}</td>

</tr>

==对整个数组过滤

$scope.limitVal = 10;

$scope.lessThan25 = function(item){

    return item.price <;

}

{{courses.length}}

<button ng-click="limitVal = 5">5</button>

<button ng-click="limitVl = 10">10</button>

//<input type="text" ng-model="searchStr" />

//<input type="text" ng-model="name" />

//<input type="text" ng-model="category"/>

//<tr ng-repeat = "course in courses | limitTo: limitVal | filter: searchStr">

//<tr ng-repeat = "course in courses | limitTo: limitVal | filter: {name: name, category:category}">

//<tr ng-repeat = "course in courses | limitTo: limitVal | filter: lessThan25">

//<tr ng-repeat = "course in courses | limitTo: limitVal | orderBy: '-price'">

<tr ng-repeat = "course in courses | limitTo: limitVal | orderBy: ['name','-price']">

    <td>{{$index + 1}}</td>

    <td>{{course.name}}</td>

    <td>{{course.category}}</td>

    <td>{{course.timeline}}</td>

    <td>{{course.price}}</td>

</tr>

所以filter能接受的包括字符串、对象和函数。

AngularJS中有关Directive的汇总的更多相关文章

angularjs中的directive scope配置
angularjs中的directive scope配置定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...
angularjs中的directive
正在初学angularjs中,在网上看到一篇详细讲解directive指令的文章,于是就记录在这里和大家一起分享 angular.module('docsTransclusionExample', [ ...
angularJs中自定义directive的数据交互
首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模 ...
AngularJS中使用Directive、Controller、Service
AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. (1)Directive 指令 (2)Controller 控制器 (3)Service ...
angularjs中directive指令与component组件有什么区别？
壹 ❀ 引我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...
angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
AngularJs中，如何在父元素中调用子元素为自定义Directive中定义的函数？
最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...
AngularJS中自定义有关一个表格的Directive
本篇体验在AngularJS中自定义一个有关表格的Directive.表格的需求包括: ● 表格结构 <table> <thead> <tr> ...
angularJS中directive父子组件的数据交互
angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...

随机推荐

从零开始自己搭建复杂网络2（以Tensorflow为例）
从零开始自己搭建复杂网络(以DenseNet为例) DenseNet 是一种具有密集连接的卷积神经网络.在该网络中,任何两层之间都有直接的连接,也就是说,网络每一层的输入都是前面所有层输出的并集, 而 ...
C++ code：数值计算之辛普生（Simpson）法求解积分问题
双线程线性dp 传纸条
/* 两种做法:一是暴力dp[i][j][k][l] 二是以走的步数k作为阶段, dp[k][i][j]表示走到第k步,第一个人横坐标走到i,第二个人横坐标走到j 可以以此推出第第一个人的坐标为[i, ...
Splay-Tree总结一：模拟队列
伸展树是一种强大的数据结构,由于其特性,可以很好地模拟队列的插队等操作,而线段树解决这类问题通常需要转化一下,比较伤脑筋而用伸展树的解决方法就是先建好一颗节点数等于队列长度的树,每个队列元素在队列中 ...
步步为营-62-Excel的导入和导出
说明:NPOI组件的使用 1 添加引用 2 代码 using System; using System.Collections.Generic; using System.ComponentModel ...
oracle表分区创建
一.什么是分区表表分区有以下优点: 1.数据查询:数据被存储到多个文件上,减少了I/O负载,查询速度提高. 2.数据修剪:保存历史数据非常的理想. 3.备份:将大表的数据分成多个文件,方便备份和恢复. ...
RabbitMQ(三): exchange 的使用
1. Exchange(交换机) 生产者只能发送信息到交换机,交换机接收到生产者的信息,然后按照规则把它推送到对列中. 一方面是接收生产者的消息,另一方面是像队列推送消息. 匿名转发 "&q ...
FFT 【JSOI2012】bzoj4332 分零食（未解决）
很不错的一道倍增优化dp?? 第一次做这类题挺难想的题目大意: 有n个小朋友,m块糖. 给小朋友分糖,如果一个小朋友分不到糖,那他后面的小朋友也分不到糖. 每个小朋友有一个喜悦值,有三个参数,O,S ...
使用sshtunnel实现python公网连接阿里云mongo服务器
背景: 公司使用阿里云的云数据库MongoDB.基于安全原因考虑,阿里云MongoDB云数据库目前只支持从阿里云ECS上访问,无法通过公网直接访问,不方便用户在本地开发环境里直接进行测试. 阿里云官方 ...
User Agent 设置
感谢版主回复,版主贴的方法网上到处都是,我试了很多次都是不行的,有用的方法都几乎这个到处转贴的信息淹没了. 今天我总算在一个博客找了到可行的方法,转过来和大家分享 Windows Registry E ...

AngularJS中有关Directive的汇总

AngularJS中有关Directive的汇总的更多相关文章

随机推荐

热门专题