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

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

  1. <html ng-app="myApp">
  2.   <head>
  3.     <script src="angualr.js"></script>
  4.     <script>
  5.         (function(){
  6.             var name = "myApp";
  7.             requried = [];
  8.             myApp = null;
  9.  
  10.             myApp = angualr.module(name, requires);
  11.  
  12.             myApp.controller("AppCtrl", functioin($scope){
  13.                 $scope.contacts = [
  14.                     {firstname: "", lastname: "'},
  15.                     ...
  16.                 ];
  17.  
  18.                 $scope.addContact = function(){
  19.                     $scope.contacts.push({firstname:"", lastname:"", isEnabled:true});
  20.                 }
  21.  
  22.                 //切换视图
  23.                 $scope.viewFile = function(){
  24.                      if($scope.viewState){
  25.                         return "contact_list.html";
  26.                      } else{
  27.                         return "contact_table.html";
  28.                      }
  29.                 }
  30.  
  31.                 $scope.onPartialLoad = function(){
  32.                     console.log($scope.viewFile() + " loaded");
  33.                 }
  34.             })
  35.         }());
  36.     </script>
  37.   </head>
  38.   <body ng-controller="AppCtrl">
  39.  
  40.   </body>
  41. </html>

==单向绑定

  1. {{contacts.length}}
  2. <div ng-bind="contacts.length"></div>
  3. <div ng-bind-template="">the first name is {{contacts[0].firstname}}</div>
  4. {{contacts[0].firstname}}
  5. {{::contacts.length}} 只展示一次数组长度，当数组长度有改变，这里不变
  6. {{ 2 + 3 }}
  7. {{ Math.min(4, 2)}}
  8. <button ng-click="addContact()">添加</button>
  9. <div ng-non-bindable>this is {{hello }}</div> 这里的{{hello}}会显示出来
  10.  
  11. ...
  12. <tr ng-repeat="contact in contacts" ng-class="$odd ? 'odd':'even'">
  13.     <td>{{$index + 1}}</td>
  14.     <td>{{contact.firtname}}</td>
  15.     <td>{{contact.lastname}}</td>
  16.     <td>{{contact.isEnabled}}</td>
  17.     <td>{{$first}}</td>
  18.     <td>{{$last}}</td>
  19.     <td>{{$middle}}</td>
  20. </tr>
  21. ...
  22.  
  23. <ng-include src="'contact_table.html'"></ng-include>
  24.  
  25. //切换视图
  26. <input type="checkbox" ng-model="viewState">切换视图
  27. <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

  1. <html ng-app="myApp">
  2.     <head>
  3.         angular.js
  4.         <script>
  5.             (function(){
  6.                 var name = "myApp[]",
  7.                 requires = [],
  8.                 myApp = null;
  9.  
  10.                 myApp = angular.module(name, requires);
  11.                 myApp.controller("AppCtrl", function($scope){
  12.                     $scope.data = {};
  13.                 });
  14.             }());
  15.         </script>
  16.     </head>
  17.     <body ng-controller="AppCtrl">
  18.     </body>
  19. </html>

页面部分

  1. <div ng-repeat="channel in ['None', 'Tv', 'kitty']"  ng-cloak>
  2.     <input type="radio" name ="leisure" value="{{channel}}" ng-model="data.whichChannel" ng-checked="$first" />{{channel}}
  3. </div>
  4.  
  5. <div ng-switch on="data.whichChannel">
  6.     <div ng-switch-default>this is none</div>
  7.     <div ng-switch-when="Tv">this is tv</div>
  8.     <div ng-switch-when="kitty">this is kitty</div>
  9. </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

  1. $scope.toggleNewContact = false;
  2. $scope.shwoNewContactForm = function(){
  3.     $scope.toggleNewContact = true;
  4. }
  5.  
  6. <button ng-click="showNewContactForm()">Add New Contact</button>
  7. <form ng-show="toggleNewContact">
  8.     <button ng-click="toggleNewContact = false">Cancel</button>
  9. </form>
  10.  
  11. <tr ng-repeat="contact in contacts" ng-if="contact.isEnabled">
  12. </tr>

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

  1. $scope.checkMe = true;
  2. $scope.url = "http://google.com";
  3. $scope.imgSrc = "hi.jpeg";
  4.  
  5. //勾选
  6. <input type="checkbox" ng-checked="{{checkME}}" /> check me
  7.  
  8. //禁用按钮
  9. <button ng-disabled="{{checkMe}}">Click me</button>
  10.  
  11. //只读
  12. <input type="text" value="he" ng-readonly="{{checkMe}}" />
  13.  
  14. //链接
  15. <a href="{{url}}">go</a>
  16. <a ng-href="{{url}}">go</a> 推荐使用
  17.  
  18. //图片
  19. <img ng-src="{{imgSrc}}"/>

例子5，ng-style

  1. <button ng-click="styles={'color':'red'}">set color</button>
  2. <button ng-click="styles={'font-weight':'bold'}">bold</button>
  3. <button ng-click="styles={'font-style':'italic'}>italic></button>
  4. <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，过滤

==对数组元素过滤

  1. $scope.courses = [
  2.     {name:"", category:"", timeline:20, price:25},
  3.     ...
  4. ];
  5.  
  6. $scope.getTargetDate = function(days){
  7.     var now = new Date();
  8.     return now.setDate(now.getDate() + days);
  9. }
  10.  
  11. <tr ng-repeat="course in courses">
  12.     <td>{{$index + 1}}</td>
  13.     <td>{{course.name | upplercase}}</td>
  14.     <td>{{course.category | lowercase }}</td>
  15.     <td>{{getTargetDate(course.timeline) | date: 'dd MMM yy' | uppercase }}</td>
  16.     <td>{{course.price | currency: "¥" }}</td>
  17.     <td>{{course | json}}</td>
  18. </tr>

==对整个数组过滤

  1. $scope.limitVal = 10;
  2. $scope.lessThan25 = function(item){
  3.     return item.price <;
  4. }
  5.  
  6. {{courses.length}}
  7. <button ng-click="limitVal = 5">5</button>
  8. <button ng-click="limitVl = 10">10</button>
  9. //<input type="text" ng-model="searchStr" />
  10. //<input type="text" ng-model="name" />
  11. //<input type="text" ng-model="category"/>
  12.  
  13. //<tr ng-repeat = "course in courses | limitTo: limitVal | filter: searchStr">
  14. //<tr ng-repeat = "course in courses | limitTo: limitVal | filter: {name: name, category:category}">
  15. //<tr ng-repeat = "course in courses | limitTo: limitVal | filter: lessThan25">
  16. //<tr ng-repeat = "course in courses | limitTo: limitVal | orderBy: '-price'">
  17. <tr ng-repeat = "course in courses | limitTo: limitVal | orderBy: ['name','-price']">
  18.     <td>{{$index + 1}}</td>
  19.     <td>{{course.name}}</td>
  20.     <td>{{course.category}}</td>
  21.     <td>{{course.timeline}}</td>
  22.     <td>{{course.price}}</td>
  23. </tr>

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

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

  1. angularjs中的directive scope配置

    angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...

  2. angularjs中的directive

    正在初学angularjs中,在网上看到一篇详细讲解directive指令的文章,于是就记录在这里和大家一起分享 angular.module('docsTransclusionExample', [ ...

  3. angularJs中自定义directive的数据交互

    首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模 ...

  4. AngularJS中使用Directive、Controller、Service

    AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. (1)Directive 指令 (2)Controller 控制器 (3)Service ...

  5. angularjs中directive指令与component组件有什么区别？

     壹 ❀ 引 我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...

  6. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  7. AngularJs中，如何在父元素中调用子元素为自定义Directive中定义的函数？

    最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...

  8. AngularJS中自定义有关一个表格的Directive

    本篇体验在AngularJS中自定义一个有关表格的Directive.表格的需求包括: ● 表格结构 <table>    <thead>        <tr>  ...

  9. angularJS中directive父子组件的数据交互

    angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...

随机推荐

  1. Spark学习之Spark安装

    Spark安装 spark运行环境 spark是Scala写的,运行在jvm上,运行环境为java7+ 如果使用Python的API ,需要使用Python2.6+或者Python3.4+ Spark ...

  2. 一台电脑，两个及多个git账号配置

    1. 生成两[三]个ssh公钥私钥 方法参照:http://www.cnblogs.com/fanbi/p/7772812.html第三步骤 假定其中一个是id_rsa, 另一个时id_rsa_two ...

  3. Day6------------磁盘用满的两种情况

    1.文件包含元数据和写入的内容 元数据:存在硬盘中的inode ls -i /etc/passwd.bak 查看inode df -i 查看inode 2.磁盘用满的两种情况 1).内容太多 2).空 ...

  4. js实现页面重定向

    在现行的网站应用中URL重定向的应用有很多: 404页面处理.网址改变(t.sina转到weibo.com).多个网站地址(如:http://www.google.com/ .www.g.cn )等: ...

  5. ocp linux 基础要点

    基本命令: 创建/修改/删除用户    useradd/usermod/userdel 创建/修改/删除用户组    groupadd/groupmod/groupdel    修改所属用户/所属用户 ...

  6. jade（pug）学习和使用

    由于版权问题,现已改名pug.但无须担心,几乎没什么区别.就算依然使用jade也不会有太大影响. 慢慢迁移过渡即可   # 官网 https://pugjs.org # github https:// ...

  7. pytest十二：cmd命令行参数

    命令行参数是根据命令行选项将不同的值传递给测试函数,比如平常在 cmd 执行”pytest —html=report.html”,这里面的”—html=report.html“就是从命令行传入的参数对 ...

  8. 基于bootstrap的基本模板

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. PowerDesigner使用积累

    PowerDesigner想必没人不知道吧?著名的CASE工具,目前最新版本为15.2,用于软件建模,可以从需求直到物理模型,支持UML2.0语法,可用于UML图绘制.最大特色是能够使设计到实现无缝衔 ...

  10. [转] 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...