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的几种方式
<div ng-bind="contacts.length"></div>
<div class="ng-bind:contacts.length"></div>
<ng-include></ng-include>
==双向绑定
<input type="text" ng-model="contacts[0].firstname"/>
例子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>
另外，
<tr ng-repeat="contact in contacts" ng-class-odd="'odd'" ng-class-even="'even'"></tr>
例子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 中共享属性.在 ...
随机推荐
- android 知识点汇总
1.activity 它是 android 应用程序的基本功能单元.一个Activity是一个应用程序组件,提供一个屏幕,用户可以用来交互为了完成某项任务,例如拨号.拍照.Activity 本身是没有 ...
- -webkit-line-clamp 限制多行文字
一.应用 CSS代码: .box { width: 100px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: ve ...
- （七）dubbo服务集群实现负载均衡
当某个服务并发量特别大的时候,一个服务延迟太高,我们就需要进行服务集群,例如某个项目一天注册量10万,这个注册功能就必须要进行集群了,否则一个服务无法应付这么大的并发量: dubbo的服务集群很简单, ...
- pytest二：setup和teardown
用例运行级别 模块级(setup_module/teardown_module)开始于模块始末,全局的 函数级(setup_function/teardown_function)只对函数用例生效(不在 ...
- pychrame更换默认以unittest执行或取消单元测试框架执行
选择某个测试框架运行脚本 File-> Settings -> Tools -> Python Integrated Tools -> Default test runner ...
- RabbitMQ(二):Java 操作队列
1. 简单模式 模型: P:消息的生产者 队列:rabbitmq C:消息的消费者 获取 MQ 连接 public static Connection getConnection() throws I ...
- C++传值、传引用
C++传值.传引用 C++的函数参数传递方式,可以是传值方式,也可以是传引用方式.传值的本质是:形参是实参的一份复制.传引用的本质是:形参和实参是同一个东西. 传值和传引用,对大多数常见类型都是适用的 ...
- ERP商品管理业务逻辑封装（三十四）
产品购进管理业务逻辑: public class ProductBLL { /// <summary> /// 产品对象添加 并且返回产品编号 /// </summary> / ...
- springbank 开发日志 SpringMVC是如何找到handler找到对应的方法并执行的
从DispatcherServlet说起,本文讨论的内容都是DispatcherServlet的doDispatch方法完成 mappedHandler是一个HandlerExecutionChain ...
- Zookeeper笔记（二）Paxos算法与Zookeeper的工作原理
Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目, 它主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配置项的管 ...