Menu
Woocommerce Menu

银河国际网址手机版3个可以改善用户体验的AngularJS指令介绍,高阶函数使用介绍

0 Comment

这其实是一个非常简短的指令,但是非常棒。在下面的例子中,用户点击了一个链接,显示的输入框需要能够自动获得焦点。这样,用户在页面显示时不必再手动点击文本域。
 

您可能感兴趣的文章:

  • angularJS
    指令封装回到顶部示例详解
  • AngularJS自定义指令实现面包屑功能完整实例
  • AngularJS动态菜单操作指令
  • 详解angularJs指令的3种绑定策略
  • Angularjs
    动态添加指令并绑定事件的方法
  • 银河国际网址手机版,Angularjs使用指令做表单校验的方法
  • Angularjs自定义指令实现三级联动
    选择地理位置
  • AngularJS框架的ng-app指令与自动加载实现方法分析
  • AngularJS内置指令
  • AngularJS中的指令全面解析(必看)
  • AngularJS实现的回到顶部指令功能实例

三、高阶函数的实际作用:

3.Contenteditable元素模型绑定

<h3>ng-init初始化变量</h3>
<div ng-init="name='aurora';age='18'">
  <p ng-bind="name+','+age"></p>
  <p>{{name+','+age}}</p>
  <p ng-bind="name"></p>
  <p ng-bind="age"></p>
</div>
<h3>ng-init初始化对象</h3>
<div ng-init="hero={name:'aurora',role:'sup',line:'不管刮风还是下雨,太阳照常升起'}">
  <p ng-bind="hero.name+','+hero.role+','+hero.line"></p>
  <p ng-bind="hero.name"></p>
  <p ng-bind="hero.role"></p>
  <p ng-bind="hero.line"></p>
</div>
<h3>ng-init初始化数组</h3>
<div ng-init="heros=['曙光女神','堕落天使','魂锁典狱长']">
  <p ng-bind="heros[0]+','+heros[1]+','+heros[2]"></p>
  <p ng-bind="heros[0]"></p>
  <p ng-bind="heros[1]"></p>
  <p ng-bind="heros[2]"></p>
</div>

<h3>ng-controller控制器</h3>
<div ng-controller="contr-2">
  First Name: <input type="text" ng-model="firstName">
  Last Name: <input type="text" ng-model="lastName">
  Full Name : {{firstName + "," + lastName}}
  Full Name :   
</div>

<h3>ng-repeat遍历无重复集合</h3>
<div ng-init="names=[1,2,3]">
 <ul>
  <li ng-repeat="x in names">
   {{x}}
  </li>
 </ul>
</div>
<h3>ng-repeat遍历重复集合</h3>
<div ng-init="number=[1,2,2,3]">
 <ul>
  <li ng-repeat="x in number track by $index">
   {{x}}
  </li>
 </ul>
</div>
<h3>ng-repeat遍历对象</h3>
<div ng-controller="contr-3">
   <ul>
    <li ng-repeat="(key,value) in object track by $index">
     {{key+":"+value}}
    </li>
   </ul>
</div>
<h3>ng-repeat遍历对象(按原有顺序)</h3>
<div ng-controller="contr-4">
   <ul ng-repeat="obj in objs ">
    <li ng-repeat="(key,value) in obj ">
     {{key+":"+value}}
    </li>
   </ul>
</div>
<h3>ng-repeat遍历对象(属性详解)</h3>
<table ng-controller="contr-5">
  <tr ng-repeat="(key, value) in objs ">
    <td>学号:

    </td>
    <td>
      :

    </td>
    <td>是否为奇数?

    </td>
    <td>是否为偶数?

    </td>
    <td>排行是老大?

    </td>
    <td>排行最小?

    </td>
    <td>排行中间?

    </td>
  </tr>
</table>
<h3>ng-repeat start/end</h3>
<div ng-controller="contr-6">
  <div ng-repeat-start="(key,value) in objs">
    <p>学号:

    </p>
    <p>
      :

    </p>
  </div>
  <div ng-repeat-end></div>
</div>
//Number类型相加  
function addInt(a,b){
return parseInt(a)+parseInt(b);
 }
//String类型相加
function addString(a,b){
return a.toString()+ b.toString(); 
}  
function add(type){
if(type==="string"){
return addString;
}else{
return addInt; 
}
}
var data1=add("string")("1","2");
//12
var data2=add("int")("1","2");
//3

您可能感兴趣的文章:

  • AngularJS HTML编译器介绍
  • AngularJS 执行流程详细介绍
  • 关于angularJs指令的Scope(作用域)介绍
  • AngularJS
    Bootstrap详细介绍及实例代码
  • AngularJS中的包含详细介绍及实现示例
  • AngularJS基础学习笔记之简单介绍
  • AngularJS
    模型详细介绍及实例代码
  • AngularJS中的Promise详细介绍及实例代码
  • Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
  • AngularJs每天学习之总体介绍

AngularJS学习笔记之基本指令(init、repeat)

<html><title></title>
<body><input type=”button” value=”ClickMe” id=”myBtn” >
<script type=”text/javascript>
var btnClick=document.getElementById(“myBtn”);
//测试环境为FireFox
btnClick. addEventListener(“click”,function(e){
alert(“I'm a button!”);
//I'm a button},false);
</script>
</body>
</html>

为了在你的应用中展示头像图片,你需要使用用户的电子邮件地址,将地址转换为小写并使用md5加密该字符串。所以聪明的做法是使用指令来做到这些,并且可以复用。

以上所述上就是本文的全部内容了,希望大家能够喜欢。

上面的代码示例基本说明什么是高阶函数,下面来看看高阶函数与我们实际编程有什么关系:

/*
 * A simple Gravatar Directive
 * @example
 *  <gravatar-image email="test@email.com" size="50"></gravatar-image>
 */
app.directive('gravatarImage', function () {
 return {
  restrict: 'AE',
  replace: true,
  required: 'email',
  template: '<img ng-src="https://www.gravatar.com/avatar/{{hash}}?s={{size}}&d=identicon" />',
  link: function (scope, element, attrs) {
   attrs.$observe('email', function (value) {
    if(!value) { return; }

    // MD5 (Message-Digest Algorithm) by WebToolkit
    var md5=function(s){function L(k,d){return(k<<d)|(k>>>(32-d));}function K(G,k){var I,d,F,H,x;F=(G&2147483648);H=(k&2147483648);I=(G&1073741824);d=(k&1073741824);x=(G&1073741823)+(k&1073741823);if(I&d){return(x^2147483648^F^H);}if(I|d){if(x&1073741824){return(x^3221225472^F^H);}else{return(x^1073741824^F^H);}}else{return(x^F^H);}}function r(d,F,k){return(d&F)|((~d)&k);}function q(d,F,k){return(d&k)|(F&(~k));}function p(d,F,k){return(d^F^k);}function n(d,F,k){return(F^(d|(~k)));}function u(G,F,aa,Z,k,H,I){G=K(G,K(K(r(F,aa,Z),k),I));return K(L(G,H),F);}function f(G,F,aa,Z,k,H,I){G=K(G,K(K(q(F,aa,Z),k),I));return K(L(G,H),F);}function D(G,F,aa,Z,k,H,I){G=K(G,K(K(p(F,aa,Z),k),I));return K(L(G,H),F);}function t(G,F,aa,Z,k,H,I){G=K(G,K(K(n(F,aa,Z),k),I));return K(L(G,H),F);}function e(G){var Z;var F=G.length;var x=F+8;var k=(x-(x%64))/64;var I=(k+1)*16;var aa=Array(I-1);var d=0;var H=0;while(H<F){Z=(H-(H%4))/4;d=(H%4)*8;aa[Z]=(aa[Z]|(G.charCodeAt(H)<<d));H++;}Z=(H-(H%4))/4;d=(H%4)*8;aa[Z]=aa[Z]|(128<<d);aa[I-2]=F<<3;aa[I-1]=F>>>29;return aa;}function B(x){var k="",F="",G,d;for(d=0;d<=3;d++){G=(x>>>(d*8))&255;F="0"+G.toString(16);k=k+F.substr(F.length-2,2);}return k;}function J(k){k=k.replace(/rn/g,"n");var d="";for(var F=0;F<k.length;F++){var x=k.charCodeAt(F);if(x<128){d+=String.fromCharCode(x);}else{if((x>127)&&(x<2048)){d+=String.fromCharCode((x>>6)|192);d+=String.fromCharCode((x&63)|128);}else{d+=String.fromCharCode((x>>12)|224);d+=String.fromCharCode(((x>>6)&63)|128);d+=String.fromCharCode((x&63)|128);}}}return d;}var C=Array();var P,h,E,v,g,Y,X,W,V;var S=7,Q=12,N=17,M=22;var A=5,z=9,y=14,w=20;var o=4,m=11,l=16,j=23;var U=6,T=10,R=15,O=21;s=J(s);C=e(s);Y=1732584193;X=4023233417;W=2562383102;V=271733878;for(P=0;P<C.length;P+=16){h=Y;E=X;v=W;g=V;Y=u(Y,X,W,V,C[P+0],S,3614090360);V=u(V,Y,X,W,C[P+1],Q,3905402710);W=u(W,V,Y,X,C[P+2],N,606105819);X=u(X,W,V,Y,C[P+3],M,3250441966);Y=u(Y,X,W,V,C[P+4],S,4118548399);V=u(V,Y,X,W,C[P+5],Q,1200080426);W=u(W,V,Y,X,C[P+6],N,2821735955);X=u(X,W,V,Y,C[P+7],M,4249261313);Y=u(Y,X,W,V,C[P+8],S,1770035416);V=u(V,Y,X,W,C[P+9],Q,2336552879);W=u(W,V,Y,X,C[P+10],N,4294925233);X=u(X,W,V,Y,C[P+11],M,2304563134);Y=u(Y,X,W,V,C[P+12],S,1804603682);V=u(V,Y,X,W,C[P+13],Q,4254626195);W=u(W,V,Y,X,C[P+14],N,2792965006);X=u(X,W,V,Y,C[P+15],M,1236535329);Y=f(Y,X,W,V,C[P+1],A,4129170786);V=f(V,Y,X,W,C[P+6],z,3225465664);W=f(W,V,Y,X,C[P+11],y,643717713);X=f(X,W,V,Y,C[P+0],w,3921069994);Y=f(Y,X,W,V,C[P+5],A,3593408605);V=f(V,Y,X,W,C[P+10],z,38016083);W=f(W,V,Y,X,C[P+15],y,3634488961);X=f(X,W,V,Y,C[P+4],w,3889429448);Y=f(Y,X,W,V,C[P+9],A,568446438);V=f(V,Y,X,W,C[P+14],z,3275163606);W=f(W,V,Y,X,C[P+3],y,4107603335);X=f(X,W,V,Y,C[P+8],w,1163531501);Y=f(Y,X,W,V,C[P+13],A,2850285829);V=f(V,Y,X,W,C[P+2],z,4243563512);W=f(W,V,Y,X,C[P+7],y,1735328473);X=f(X,W,V,Y,C[P+12],w,2368359562);Y=D(Y,X,W,V,C[P+5],o,4294588738);V=D(V,Y,X,W,C[P+8],m,2272392833);W=D(W,V,Y,X,C[P+11],l,1839030562);X=D(X,W,V,Y,C[P+14],j,4259657740);Y=D(Y,X,W,V,C[P+1],o,2763975236);V=D(V,Y,X,W,C[P+4],m,1272893353);W=D(W,V,Y,X,C[P+7],l,4139469664);X=D(X,W,V,Y,C[P+10],j,3200236656);Y=D(Y,X,W,V,C[P+13],o,681279174);V=D(V,Y,X,W,C[P+0],m,3936430074);W=D(W,V,Y,X,C[P+3],l,3572445317);X=D(X,W,V,Y,C[P+6],j,76029189);Y=D(Y,X,W,V,C[P+9],o,3654602809);V=D(V,Y,X,W,C[P+12],m,3873151461);W=D(W,V,Y,X,C[P+15],l,530742520);X=D(X,W,V,Y,C[P+2],j,3299628645);Y=t(Y,X,W,V,C[P+0],U,4096336452);V=t(V,Y,X,W,C[P+7],T,1126891415);W=t(W,V,Y,X,C[P+14],R,2878612391);X=t(X,W,V,Y,C[P+5],O,4237533241);Y=t(Y,X,W,V,C[P+12],U,1700485571);V=t(V,Y,X,W,C[P+3],T,2399980690);W=t(W,V,Y,X,C[P+10],R,4293915773);X=t(X,W,V,Y,C[P+1],O,2240044497);Y=t(Y,X,W,V,C[P+8],U,1873313359);V=t(V,Y,X,W,C[P+15],T,4264355552);W=t(W,V,Y,X,C[P+6],R,2734768916);X=t(X,W,V,Y,C[P+13],O,1309151649);Y=t(Y,X,W,V,C[P+4],U,4149444226);V=t(V,Y,X,W,C[P+11],T,3174756917);W=t(W,V,Y,X,C[P+2],R,718787259);X=t(X,W,V,Y,C[P+9],O,3951481745);Y=K(Y,h);X=K(X,E);W=K(W,v);V=K(V,g);}var i=B(Y)+B(X)+B(W)+B(V);return i.toLowerCase();};

    scope.hash = md5(value.toLowerCase());
    scope.size = attrs.size;

    if(angular.isUndefined(scope.size)) {
     scope.size = 60; // default to 60 pixels
    }
   });
  }
 };
});

1,回调函数

/**
 * Sets focus to this element if the value of focus-me is true.
 * @example
 * <a ng-click="addName=true">add name</a>
 * <input ng-show="addName" type="text" ng-model="name" focus-me="{{addName}}" />
 */
app.directive('focusMe', ['$timeout', function($timeout) {
 return {
  scope: { trigger: '@focusMe' },
  link: function(scope, element) {
   scope.$watch('trigger', function(value) {
    if(value === "true") {
     $timeout(function() {
      element[0].focus();
     });
    }
   });
  }
 };
}]);

结束语:高阶函数并不是JavaScript的专利,但绝对是JavaScript编程的利器。高阶函数实际上就是对基本算法的再度抽象,我们可以利用这一点,提高代码的抽象度,实现最大限度的代码重用,编写出更简洁、更利于重构的代码。

对我而言,指令是AngularJS中最激动人心的特性。创建可重用的组件,并可以将其添加到纯粹的HTML应用程序库,这是多么难以置信并且强大的功能。由于指令实用,并且大部分指令书写难度不高,许多开发者早已对于目前受欢迎的库开发了许多指令。举例来说,AngularJS团队已经为Bootstrap创建了一系列的指令(难道还有人不用它吗?),被称作UI
Bootstrap。

2,数据筛选与排序算法

我希望经过文中的介绍,你会感悟到AngularJS指令的有用之处。

在以上示例中,文档中定义了一个id为myBtn的按钮,js脚本为其添加了一个点击事件,其中addEventListener的第二个参数是一个函数。

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图