AngularJS常用插件与指令收集（angular 插件）

25-02-21 12

对于AngularJS常用插件与指令收集感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍angular插件，并为您提供关于3个可以改善用户体验的AngularJS指令介绍_AngularJS、A

对于AngularJS常用插件与指令收集感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍angular 插件，并为您提供关于3个可以改善用户体验的AngularJS指令介绍_AngularJS、Angular js 常用插件、Angular js指令收录(五)、Angular js指令收录(六)的有用信息。

本文目录一览：

AngularJS常用插件与指令收集（angular 插件）
3个可以改善用户体验的AngularJS指令介绍_AngularJS
Angular js 常用插件
Angular js指令收录(五)
Angular js指令收录(六)

AngularJS常用插件与指令收集（angular 插件）

参考地址: https://www.cnblogs.com/xuepei/p/6022883.html

图片视频类

angular-maxonry 图片墙效果插件，可以将图片组织成类似于瀑布流的效果，依赖于jQuery、imageloaded和Masonry
angular-deckgrid 另一个照片瀑布流解决方案
ngImgCrop 图片剪裁工具
ngVideo 播放器，直接播放指定地址的mp4，控制按钮美观度远甩朝内99.99%的视频站

输入控件类

ngDraggable 控制元素拖动的控件，Demo
angular-umeditor 百度umeditor的AngularJS扩展，umeditor从界面上讲并不够现代化，但却总有人喜欢它
ngAutocomplete 喜闻乐见的自动补完
textAngular 文本编辑器，更简洁，更漂亮
ngTagsInput 以标签的方式来组织输入
Angular-slider 以拖动方式输入值的控件
Angular Slidezilla 与Angular-slider功能一样，只不过设计风格不一样

界面类

ui-bootstrap 官方扩展，在AngularJS中方便的以指令的方式使用Bootstrap
ui-map 用于在页面中集成Google Maps
NG-Grid 官方提供的表格插件，支持表格的主题、排序、直接编辑、多行选择等操作，而且使用非常简单，只需要一行HTML代码，但是，比较难看，适合于不讲究外观但要求功能强大的场合，像后台工具、管理系统之类
angular-table 第三方表格工具，适合于需要对表格进行高度定制的场合
ng-table 在易用性和外观上对上面两个进行折衷的解决方案
AngularUI 上面的ui-bootstrap、ui-map就是它的一部分，官方提供的常用扩展集，除了这两个，还有ui-router、ui-select等，注意，它使用的是Bootstrap 2.x
Adapt-Strap 第三方Bootstrap插件，而且是基于扁平化的Bootstrap 3，更美观
ng-polymer-elementsPolymer风格的AngularJS指令，Material Design设计，值得尝试
Angular Loading Bar 可用于在页面顶部增加一个漂亮的进度条
angular-busy 与Angular Loading Bar有点类似，主要用于处理$http通信时候的动画
ngInfiniteScroll 从名字可以看出来，它是一个用于组织瀑布流和时间线的扩展
ngScrollTo 页内滚动工具，可以将页面滚动到指定id的元素位置
ngDialog 比Bootstrap更简单，更好用，更漂亮的网页对话框
Angular Treeview 树状目录组织扩展，使用相当方便，而且不依赖于jQuery
angular-growl 用于在页面上显示警告框，可以设置显示时间，还可以直接显示$http中收到的警告
angular-truncate 当文字过多过长时，显示部分文字的插件，可以按文字总长度来控制，也可以按单词数量来控制

其它工具类

angular-translate AngularJS的i18n扩展
Satellizer 可以方便的在AngularJS中集成第三方账号登陆，支持国际主流社交网站账号，支持协议有OAuth 1.0/2.0
ngStorage 本在存储插件，用于处理localStorage和sessionStorage
ng-csv 导出csv的扩展

总结

以上是小编为你收集整理的AngularJS常用插件与指令收集全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

原文地址：https://www.cnblogs.com/xumBlog/p/10776402.html

3个可以改善用户体验的AngularJS指令介绍_AngularJS

1.头像图片

为了在你的应用中展示头像图片，你需要使用用户的电子邮件地址，将地址转换为小写并使用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}}&#63;s={{size}}&d=identicon" / alt="3个可以改善用户体验的AngularJS指令介绍_AngularJS" >'',
  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
    }
   });
  }
 };
});

登录后复制

2. 关注我

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

/**
 * 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();
     });
    }
   });
  }
 };
}]);

登录后复制

3.Contenteditable元素模型绑定

我们使用contenteditable而不是textarea元素的最主要原因在于使用前者可以在布局和UI中没有限制。我们在编辑器中使用这条指令可以实现将contenteditable元素的html和ng-model进行一个双向绑定。目前，在contenteditable元素中并没有支持ng-model。

/**
 * Two-way data binding for contenteditable elements with ng-model.
 * @example
 *  <p contenteditable="true" ng-model="text"></p>
 */
app.directive(''contenteditable'', function() {
 return {
  require: ''&#63;ngModel'',
  link: function(scope, element, attrs, ctrl) {
 
   // Do nothing if this is not bound to a model
   if (!ctrl) { return; }
 
   // Checks for updates (input or pressing ENTER)
   // view -> model
   element.bind(''input enterKey'', function() {
    var rerender = false;
    var html = element.html();
 
    if (attrs.noLineBreaks) {
     html = html.replace(/<div>/g, '''').replace(/<br>/g, '''').replace(/<\/div>/g, '''');
     rerender = true;
    }
 
    scope.$apply(function() {
     ctrl.$setViewValue(html);
     if(rerender) {
      ctrl.$render();
     }
    });
   });
 
   element.keyup(function(e){
    if(e.keyCode === 13){
     element.trigger(''enterKey'');
    }
   });
 
   // model -> view
   ctrl.$render = function() {
    element.html(ctrl.$viewValue);
   };
 
   // load init value from DOM
   ctrl.$render();
  }
 };
});

登录后复制

结论：AngularJS指令可用于改善用户体验

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

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

Angular js 常用插件

图片视频类

angular-maxonry图片墙效果插件，可以将图片组织成类似于瀑布流的效果，依赖于jQuery、imageloaded和Masonry
angular-deckgrid另一个照片瀑布流解决方案
ngImgCrop图片剪裁工具
ngVideo播放器，直接播放指定地址的mp4，控制按钮美观度远甩朝内99.99%的视频站
angular-image-404当img元素的图片无法正常获取时，使用这个指令可以显示占位图片，可以自定义占位图，也可以使用默认的占位图

输入控件类

ngDraggable控制元素拖动的控件，Demo
ui-sortable以拖动的方式调整数组中元素的索引和位置，依赖 jQuery 和 jQuery-ui。Demo
ngAutocomplete喜闻乐见的自动补完
textAngular文本编辑器，更简洁，更漂亮
ngTagsInput以标签的方式来组织输入
Angular-slider以拖动方式输入值的控件
Angular Slidezilla与Angular-slider功能一样，只不过设计风格不一样
Checklist-modelAngularJS 多选框输入的值处理得并不好，通过这个指令，可以方便的将多选框的值直接组织成数组

文本编辑器

textAngular在 Github 中排名第一的 HTML 编辑器，Demo（需FQ）
Angular Froala非常好用的另外一个 HTML 编辑器，而且支持 inline 编辑，比 textAngular 漂亮，Github
angular-umeditor百度umeditor的AngularJS扩展，umeditor从界面上讲并不够现代化，但却总有人喜欢它

界面类

ui-bootstrap官方扩展，在AngularJS中方便的以指令的方式使用Bootstrap
ui-map用于在页面中集成Google Maps
NG-Grid官方提供的表格插件，支持表格的主题、排序、直接编辑、多行选择等操作，而且使用非常简单，只需要一行HTML代码，但是，比较难看，适合于不讲究外观但要求功能强大的场合，像后台工具、管理系统之类
angular-table第三方表格工具，适合于需要对表格进行高度定制的场合
ng-table在易用性和外观上对上面两个进行折衷的解决方案
AngularUI上面的ui-bootstrap、ui-map就是它的一部分，官方提供的常用扩展集，除了这两个，还有ui-router、ui-select等，注意，它使用的是Bootstrap 2.x
Adapt-Strap第三方Bootstrap插件，而且是基于扁平化的Bootstrap 3，更美观
ng-polymer-elementsPolymer风格的AngularJS指令，Material Design设计，值得尝试
Angular Loading Bar可用于在页面顶部增加一个漂亮的进度条
angular-busy与Angular Loading Bar有点类似，主要用于处理$http通信时候的动画
ngInfiniteScroll从名字可以看出来，它是一个用于组织瀑布流和时间线的扩展
ngScrollTo页内滚动工具，可以将页面滚动到指定id的元素位置
ngDialog比Bootstrap更简单，更好用，更漂亮的网页对话框
Angular Treeview树状目录组织扩展，使用相当方便，而且不依赖于jQuery
angular-growl用于在页面上显示警告框，可以设置显示时间，还可以直接显示$http中收到的警告
angular-truncate当文字过多过长时，显示部分文字的插件，可以按文字总长度来控制，也可以按单词数量来控制
angular-fallback-image当你的图片地址返回的是 404 的时候，使用这个插件可以将其替换为另外的占位图

其它工具类

angular-translateAngularJS的i18n扩展
Satellizer可以方便的在AngularJS中集成第三方账号登录，支持国际主流社交网站账号，支持协议有OAuth 1.0/2.0
ngStorage本在存储插件，用于处理localStorage和sessionStorage
ng-csv导出csv的扩展
angular-once双向绑定虽然方便，但如果数据太多，会造成一些性能问题。angular-once的解决方案是，对于不涉及到修改的数据，不要使用双向绑定，而是使用angular-once提供的once-text、once-src等等。

Angular js指令收录(五)

Directive可能是AngularJS中比较复杂的一个东西了。一般我们将其理解成指令。AngularJS自带了不少预设的指令，比如ng-app，ng-controller这些。可以发现个特点，AngularJS自带的指令都是由ng-打头的。

那么，Directive究竟是个怎么样的一个东西呢？我个人的理解是这样的：将一段html、js封装在一起，形成一个可复用的独立个体，具体特定的功能。下面我们来详细解读一下Directive的一般性用法。

AnguarJS directive的常用定义格式以及参数说明

直接return

看下面的代码：

var myDirective = angular.module('directives',[]);

myDirective.directive('directiveName',function($inject) {
    return {
        template: '<div></div>',
        replace: false,
        transclude: true,
        restrict: 'E',
        scope: {},
        controller: $scope,$element) {

        },
        complie: tElement,tAttrs,transclude) {
            return {
                pre: function preLink(scope,iElement,iAttrs,controller) {

                },
                post: function postLink(arams"">
                }
            };
        },
        link: 
        }
    };
});

这里直接return了一个object，对象中包括比较多的属性，这些属性都是对自定义directive的定义。详细的含义，下面会继续说明。

return对象参数说明

return {
    name: '',
    priority: 0,
    terminal: teral"">    scope: {},
    controller: fn,
    require: fn,
    restrict:     template:     templateUrl:     replace:     transclude: teral"">    compile: fn,
    link: fn
}

如上所示，return的对象中会有很多的属性，这行属性都是用来定义directive的。下面我们来一个个的说明他们的作用。

name
表示当前scope的名称，一般声明时使用默认值，不用手动设置此属性。
priority
优先级。当有多个directive定义在同一个DOM元素上时，有时需要明确他们的执行顺序。这个属性用于在directive的compile function调用之前进行排序。如果优先级相同，则执行顺序是不确定的（根据经验，优先级高的先执行，相同优先级时按照先绑定后执行）。
teminal
最后一组。如果设置为true，则表示当前的priority将会成为最后一组执行的directive，即比此directive的priority更低的directive将不会执行。同优先级依然会执行，但是顺序不确定。
scope
- true
  将为这个directive创建一个新的scope。如果在同一个元素中有多个directive需要新的scope的话，它还是只会创建一个scope。新的作用域规则不适用于根模版，因为根模版往往会获得一个新的scope。
- {}
  将创建一个新的、独立的scope，此scope与一般的scope的区别在于它不是通过原型继承于父scope的。这对于创建可复用的组件是很有帮助的，可以有效的防止读取或者修改父级scope的数据。这个独立的scope会创建一个拥有一组来源于父scope的本地scope属性hash集合。这些本地scope属性对于模版创建值的别名很有帮助。本地的定义是对其来源的一组本地scope property的hash映射。
controller
controller构造函数。controller会在pre-linking步骤之前进行初始化，并允许其他directive通过指定名称的require进行共享。这将允许directive之间相互沟通，增强相互之间的行为。controller默认注入了以下本地对象：
- $scope与当前元素结合的scope
- $element当前的元素
- $attrs当前元素的属性对象
- $transclude一个预先绑定到当前scope的转置linking function
require
请求另外的controller，传入当前directive的linking function中。require需要传入一个directive controller的名称。如果找不到这个名称对应的controller，那么将会抛出一个error。名称可以加入以下前缀：
- ?不要抛出异常。这将使得这个依赖变为一个可选项
- ^允许查找父元素的controller
restrict
EACM的子集的字符串，它限制了directive为指定的声明方式。如果省略的话，directive将仅仅允许通过属性声明
- E元素名称：
- A属性名：
- Cclass名：
- M注释：
template
如果replace为true，则将模版内容替换当前的html元素，并将原来元素的属性、class一并转移；如果replace为false，则将模版元素当作当前元素的子元素处理。
templateUrl
与template基本一致，但模版通过指定的url进行加载。因为模版加载是异步的，所有compilation、linking都会暂停，等待加载完毕后再执行。
replace
如果设置为true，那么模版将会替换当前元素，而不是作为子元素添加到当前元素中。（为true时，模版必须有一个根节点）
transclude
编译元素的内容，使它能够被directive使用。需要在模版中配合ngTransclude使用。transclusion的有点是linking function能够得到一个预先与当前scope绑定的transclusion function。一般地，建立一个widget，创建独立scope，transclusion不是子级的，而是独立scope的兄弟级。这将使得widget拥有私有的状态，transclusion会被绑定到父级scope中。（上面那段话没看懂。但实际实验中，如果通过调用myDirective，而transclude设置为true或者字符串且template中包含的时候，将会将的编译结果插入到soMetag的内容中。如果any的内容没有被标签包裹，那么结果soMetag中将会多了一个span。如果本来有其他东西包裹的话，将维持原状。但如果transclude设置为’element’的话，any的整体内容会出现在soMetag中，且被p包裹）
- true/false 转换这个directive的内容。（这个感觉上，是直接将内容编译后搬入指定地方）
- ‘element’ 转换整个元素，包括其他优先级较低的directive。（像将整体内容编译后，当作一个整体（外面再包裹p），插入到指定地方）
compile
这里是compile function，将在下面实例详细说明
link
这里是link function ，将在下面实例详细讲解。这个属性仅仅是在compile属性没有定义的情况下使用。

关于scope

这里关于directive的scope为一个object时，有更多的内容非常有必要说明一下。看下面的代码：

scope: {
    name: '=',
    age:     sex: '@',
    say: '&'
}

这个scope中关于各种属性的配置出现了一些奇怪的前缀符号，有=，@，&，那么这些符号具体的含义是什么呢？再看下面的代码：

1	<div my-directive name="myName" age="myAge" sex="male" say="say()"></div>

function Controller($scope) {
    $scope.name = 'Pajjket';
    $scope.age = 99;
    $scope.sex = '我是男的';
    $scope.say = ) {
        alert('Hello，我是弹出消息');
    };
}

可以看出，几种修饰前缀符的大概含义：

@: 指令中的取值为html中的字面量/直接量
&：指令中的取值为Controller中对应$scope上的属性，但是这个属性必须为一个函数回调

下面是更加官方的解释：

=expression/attr

attr

{localModel: '=myAttr'}

localName

parentModel

双向绑定

@或者@attr
建立一个local scope property到DOM属性的绑定。因为属性值总是String类型，所以这个值总返回一个字符串。如果没有通过@attr指定属性名称，那么本地名称将与DOM属性的名称一致。
例如：
，widget的scope定义为：{localName: '@myAttr'}。那么，widget scope property的localName会映射出"hello "转换后的真实值。当name属性值发生改变后，widget scope的localName属性也会相应的改变（仅仅是单向，与上面的=不同）。那么属性是在父scope读取的（不是从组件的scope读取的）
&或者&attr
提供一个在父scope上下文中执行一个表达式的途径。如果没有指定attr的名称，那么local name将与属性名一致。
例如：
<widget my-attr="count = count + value">，widget的scope定义为：{localFn:’increment()’}，那么isolate scope propertylocalFn会指向一个包裹着increment()表达式的function。
一般来说，我们希望通过一个表达式，将数据从isolate scope传到parent scope中。这可以通过传送一个本地变量键值的映射到表达式的wrapper函数中来完成。例如，如果表达式是increment(amount)，那么我们可以通过localFn({amount:22})的方式调用localFn以指定amount的值。

directive 实例讲解

下面的示例都围绕着上面所作的参数说明而展开的。

directive声明实例

// 自定义directive
var myDirective = angular.modeule('myTest',95)">) {
    return {
        restrict: 'EMAC',
        require: '^ngModel',
        scope: {
            ngModel: '='
        },
        template: '<div><h4>Weather for {{ngModel}}</h4</div>'
    };
})；

// 定义controller
var myControllers = angular.module('controllers',[]);
myControllers.controller('testController',[
    '$scope',
    $scope) {
        $scope.name = 'this is directive1';
    }
]);


var app = angular.module('testApp',
    'controllers'
]);

<body ng-app="testApp">
    <div ng-controller="testController">
        <input type="text" ng-model="city" placeholder="Enter a city" />
        <my-test ng-model="city" ></my-test>
        <span my-test="exp" ng-model="city"></span>
        <span ng-model=</span>
    </div>
</body>

template与templateUrl的区别和联系

templateUrl其实根template功能是一样的，只不过templateUrl加载一个html文件，上例中，我们也能发现问题，template后面根的是html的标签，如果标签很多呢，那就比较不爽了。可以将上例中的，template改一下。

myDirective.directive(        templateUrl:'../partials/tem1.html'   //tem1.html中的内容就是上例中template的内容。
    }
});

scope重定义

//directives.js中定义myAttr
myDirectives.directive('myAttr',
        scope: {
            customerInfo: '=info'
        },104)">'Name: {{customerInfo.name}} Address: {{customerInfo.address}}<br>' +
                  'Name: {{vojta.name}} Address: {{vojta.address}}'
    };
});

//controller.js中定义attrtest
myControllers.controller('attrtest',[$scope) {
        $scope.naomi = {
            name: 'Naomi',
            address: '1600 Amphitheatre'
        };
        $scope.vojta = {
            name: 'Vojta',104)">'3456 Somewhere Else'
        };
    }
]);

// html中
"attrtest">
        <my-attr info="naomi"></my-attr>
    </body>

其运行结果如下：

1 2	Name: Naomi Address: 1600 Amphitheatre //有值,因为customerInfo定义过的 Name: Address: //没值，因为scope重定义后，vojta是没有定义的

我们将上面的directive简单的改一下，

myDirectives.directive('Name: {{vojta.name}} Address: {{vojta.address}}'
    };
});

运行结果如下：

Name: Address:
Name: Vojta Address: 3456 Somewhere Else

因为此时的directive没有定义独立的scope，customerInfo是undefined，所以结果正好与上面相反。

transclude的使用

transclude的用法，有点像jquery里面的$().html()功能

'myEvent',
        scope: {
            'close': '$onClick'      //根html中的on-click="hideDialog()"有关联关系
        },
        templateUrl: '../partials/event_part.html'
    };
});

myController.controller('eventTest',104)">'$timeout',$timeout) {
        $scope.name = 'Tobias';
        $scope.hideDialog = ) {
            $scope.dialogIsHidden = true;
            $timeout() {
                $scope.dialogIsHidden = false;
            },2000);
        };
    }
]);

"phonecatApp">
    "eventtest">
        <my-event ng-hide="dialogIsHidden" on-click="hideDialog()">
            Check out the contents,{{name}}!
        </my-event>
    </body>

<!--event_part.html -->
<div>
    <a href ng-click="close()">×</a>
    <div ng-transclude></div>

说明：这段html最终的结构应该如下所示：

<div ng-hide="hideDialog()">
            <span>Check out the contents,{{name}}!</div>
     将原来的html元素中的元素Check out the contents,!插入到模版的<div ng-transclude></div>中，还会另外附加一个<span>标签。 
 controller，link，compile之间的关系 
 
  
   
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  
    'exampleDirective',104)">'<p>Hello {{number}}!</p>',$element){
            $scope.number = $scope.number + "22222 ";
        },el,attr) {
            scope.number = scope.number + "33333 ";
        },
        compile: element,attributes) {
                                scope.number = scope.number + "44444 ";
                },104)">"55555 ";
                }
            };
        }
    }
});
  
   
  
 
 
  
   
    //controller.js添加
myController.controller('directive2',[
    '$scope',
    function($scope) {
        $scope.number = '1111 ';
    }
]);
  
   
  
 
 
  
   
    //html
"directive2">
        <example-directive></example-directive>
     上面小例子的运行结果如下： 
 
  
   
    Hello 1111 22222 44444 5555 !
  
   
  
 
 由结果可以看出来，controller先运行，compile后运行，link不运行。 
 我们现在将compile属性注释掉后，得到的运行结果如下： 
 
  
   
    Hello 1111 22222 33333 !
  
   
  
 
 由结果可以看出来，controller先运行，link后运行，link和compile不兼容。一般地，compile比link的优先级要高。 
 转载地址:http://blog.gejiawen.com/2014/07/16/usage-for-angularjs-directive/
                  


                  总结
                  以上是小编为你收集整理的Angular js指令收录(五)全部内容。
                  如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。
            
          
          

          
            
              

                
                  Angularjs相关文章
                

                
                  
                    AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选
                  
                  ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中文文档更容易理解，前提是你的英语基础还可以。英文文档对于知识点讲述简明扼要，通俗易懂，而有些中文文档读起来特别费力，基础差、底子薄的有可能一会就会被绕晕了，最起码英文文档中的代码与中文文档中的代码是一致的，但知识点讲述实在是差距太大。Angular.jshasapowerfuldire
                
                
                
                  
                    AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例
                  
                  AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas 基础上。目前，它支持6种图表类型（折线图，条形图，雷达图，饼图，柱状图和极地区域区）。而且，这是一个独立的包，不依赖第三方 JavaScript 库，小于 5KB。   其中用到的软件：   Chart.js框架，版本1.0.2，一
                
                
                
                  
                    AngularJS进阶(三十七)IE浏览器兼容性后续
                  
                  IE浏览器兼容性后续前言   继续尝试解决IE浏览器兼容性问题，结局方案为更换jquery、angularjs、IE的版本。   1.首先尝试更换jquery版本为1.7.2   jquery-1.9.1.js-->jquery-1.7.2.js--> jquery2.1.4.js 无效   2.尝试更换IE版本IE8   IE11-
                
                
                
                  
                    AngularJS进阶(五)Angular实现下拉菜单多选
                  
                  Angular实现下拉菜单多选写这篇文章时，引用文章地址如下：http://ngmodules.org/modules/angularjs-dropdown-multiselecthttp://dotansimha.github.io/angularjs-dropdown-multiselect/#/AngularJSDropdownMultiselectThisdire
                
                
                
                  
                    AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
                  
                  在AngularJS应用中集成科大讯飞语音输入功能前言   根据项目需求，需要在首页搜索框中添加语音输入功能，考虑到科大讯飞语音业务的强大能力，遂决定使用科大讯飞语音输入第三方服务。软件首页截图如下所示：   涉及的源代码如下所示:  	//语音识别$rootScope.startRecognize = function() {var speech;
                
                
                
                  
                    AngularJS进阶(三十四)Angular数据更新不及时问题探讨
                  
                  Angular数据更新不及时问题探讨前言   在修复控制角标正确变化过程中，发觉前端代码组织层次出现了严重问题。传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染。根据《AngularJs深度剖析与最佳实践》，如果两个控制器的协作存在大量的数据共享和交互可以利用Factory等服务的“单例”特性为它们注入一个共享对象来传递数据。而自己在使用rootScope
                
                
                
                  
                    AngularJS进阶(三)HTML:让表单、文本框只读，不可编辑的方法
                  
                  HTML:让表单、文本框只读，不可编辑的方法有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使中国">的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。方法1:onfocus=this.blur()中国"onfocus=this.blur()>方法2:readonly中国"readonly>中国"readonly="tru
                
                
                
                  
                    AngularJS进阶(十七)在AngularJS应用中实现微信认证授权遇到的坑
                  
                  在AngularJS应用中实现微信认证授权遇到的坑前言      项目开发过程中，移动端新近增加了一个功能“微信授权登录”，由于自己不是负责移动端开发的，但最后他人负责的部分未达到预期效果。不能准确实现微信授权登录。最后还得靠自己做进一步的优化工作，谁让自己是负责人呢？原来负责人就是负责最后把所有的BUG解决掉。   首先，熟悉一下微信授权部分的源代码，如下所示:
                
                
            
          
        
        
        
        
            
             
          
            



            
          
          
          
          
            
              
                热门文章
                • AngularJS进阶(四)ANGULAR.JS实现下拉菜
• AngularJS进阶(四十一)AngularJS中使用
• AngularJS进阶(三十七)IE浏览器兼容性后
• AngularJS进阶(五)Angular实现下拉菜单
• AngularJS进阶(十八)在AngularJS应用中
• AngularJS进阶(三十四)Angular数据更新
• AngularJS进阶(三)HTML:让表单、文本框
• AngularJS进阶(十七)在AngularJS应用中
• AngularJS进阶(二十七)实现二维码信息的
• AngularJS进阶(十五)Cookie ‘data‘ p
              
            
          
          
          
          
          
            
              
          
    
              
            
          
          
          
         
          
          
            
              
                热门标签更多
                HTMLreactjsCSSNode.jsangulartypescriptvue.jsreact-natispringkotlinAPIseleniumtensorflowbashangularJSexpressxcodematplotlibflaskHibernatedictionaryrailscocoswebnpmreact-hookmongoosegoogle-appformswpfRestwebpackunit-testihttpclassfileNext.jsJsHTML5bootstrap-

              
            
          
          
          
          
          
          
              




          
          
          
        
        
      
    
    
  
    
      
        
        友情链接:

          菜鸟教程
        

          前端之家
        

          编程小课
        
          
        小编
 - 我要投稿
 - 广告合作
 - 联系我们
 - 免责声明
 - 网站地图
        
        版权所有 © 2018 小编 闽ICP备13020303号-8
      
      微信公众号搜"程序精选"关注
微信扫一扫可直接关注哦！

Angular js指令收录(六)

前言

AngularJS中的指令是其尤为复杂的一个部分，但是这也是其比较好玩的地方。今天我们就来说一说AngularJS中的NgModelController。

在AngularJS的内置指令中，有一个directive叫做ngModel，我们可以用它来沟通控制器和视图层的数据交换。说的简单点，就是我们可以用它来做双方数据绑定。

这篇文章我们就来说一说如何在我们自定义的指令中，利用ngModel的controller来做双向数据绑定。

注意，本篇文章不是对NgModelController文档的说明，而是更偏向实践。下面我将全程带领大家去实现一个自定义指令，并且利用ng-model属性来做双方的数据绑定。

示例

我们的app中使用了一个自定义的指令，名字叫做timeDruation，如下，

<div ng-app="HelloApp" ng-controller="HelloController">
    <h1>自定义指令</h1>
    <time-duration ng-model="test"></time-duration>
    <h1>默认指令<input ng-model="test">second
</div>

JS代码如下，

angular.module('HelloApp',[])
    .directive('timeDuration',TimeDurationDirective);
    .controller('HelloController',function($scope) {
        $scope.test = 1;
    });

我们的示例指令可以做这样一件事，可以指定几个常见的时间单位，并且能够输入数据。最终我们将得到对应的秒数。其功能的截图如下，

这里我们特意将test变量分别绑定到我们的自定义指令和默认指令中，以观察其效果。

自定义指令

闲话少叙，show my code.

先上指令的模板。从上图中可以看出，指令包含一个输入框一个下拉选择框。

<div class="time-duration">
    'num'>
    <select ng-model='unit'>
        <option value="seconds">Seconds</option>
        "minutes">Minutes"hours">Hours"days">Days</option>
    </select>
 模板其实很简单，这里就不多说了。下面我们来看看这个指令的逻辑部分。 
 
  
   
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  
    function TimeDurationDirective() {
    var tpl = '....'; // 指令模板代码就是上面的内容，这里就不复制了。
    
    return {
        restrict: 'E',
        replace: true,
        template: tpl,
        require: 'ngModel',
        scope: {},
        link: scope,element,attrs,ngModelController) {
            var multiplierMap = {
                seconds: 1,
                minutes: 60,
                hours: 3600,
                days: 86400
            };
            var multiplierTypes = ['seconds','minutes',104)">'hours',104)">'days'];

            // Todo
        }
    };
}
  
   
  
 
 指令的link方法我们暂时Todo了它。后面会逐步完善。 
 我先来看看这个指令的定义，其中用到了require声明。我的博客中这篇文章AngularJS Directive用法说明对require的用法作了详细的说明。简单来说，require的作用就是为这个directive声明一个依赖关系，表明此directive依赖另一个指令的controller属性。 
 这里稍微说明一下require的衍生用法。我们可以在require前加上修辞量词，比如， 
 
  
   
    1
2
3
4
5
6
7
8
9
10
11
  
    return {
    '^ngModel'
}

'?ngModel'
}

'?^ngModel'
}
  
   
  
 
 
 ^前缀修饰表示允许查找当前指令的父级指令，如果找不到对应指令的controller则抛出一个错误。 
 ?则表示将这个require动作变成一个可选项，意思就是找不到对应指令的controller就算了，不会抛出错误。 
 当然，我们也可以联合使用这两个前缀修饰。 
 
 相对?ngModel，^ngModel我们使用的频率要更加高一点。比如， 
 
  
   
    1
2
3
  
    <my-directive ng-model="my-model">
    <other-directive></other-directive>
</my-directive>
  
   
  
 
 这时，我们在other-directive中使用require: ^ngModel，它将会自动查找my-directive指令声明中的controller属性。 
 使用NgModelController 
 当我们声明了require: 'ngModel'之后，在link方法中会注入第四个参数，这个参数就是我们require的那个指令对应的controller。这里就是内置指令ngModel的指控器ngModeController了。 
 
  
   
    link: function (arams"">    // Todo
}
  
   
  
 
 $viewValue和$modelValue 
 在ngModelController中有两个很重要的属性，一个叫做$viewValue，一个叫做$modeValue。这两者的含义官方的解释如下， 
 
 $viewValue: Actual string value in the view.
 $modelValue: The value in the model,that the control is bound to. 
 
 如果你对上面的官方解释有疑惑的话，我这里给出一种我个人的解释。 
 $viewView就是指令渲染模板所用的值，而$modelView是在控制器中流通的值。很多时候，这两个值可能是不一样的。 
 比如你在页面上展示了一个日期，它显示的可能是“Oct. 20 2015”这样的字符串，但是呢，这个字符串在控制器中对应的值可能是一个Javascript的Date对象的实例。 
 再比如，我们的这个time-duration示例中，$viewValue其实指的是指令模板中num和unit组合出来的值，而$modelValue是HelloAppController中test变量对应的值。 
 $formatters和$parses
 
 除了$modelValue这两个属性之外，还有两个用来处理他们的方法。分别是$parses和$formatters。 
 前者的是作用是将$viewValue->$modelValue，后者的作用恰好相反，是将$modelValue->$viewValue。 
time-duration指令与外部控制器以及其内部的运作如下图， 
  
 
 在外部控制器中（即这里的HelloApp的controller），我们通过ng-model="test"将test变量传入指令time-duration中，并建立绑定关系。 
 在指令内部，$modelValue其实就是test值的一份拷贝。 
 我们通过$formatters()方法将$modelValue转变成$viewValue。 
 然后调用$render()方法将$viewValue渲染到directive template中。 
 当我们通过某种途径监控到指令模板中的变量发生变化之后，我们调用$setViewValue()来更新$viewValue。 
 与（4）相对应，我们通过$parsers方法将$viewValue转化成$modelValue。 
 当$modelValue发生变化后，则会去更新HelloApp的UI。 
 
 完善指令逻辑 
 按照上面的流程，我们先来将$modelValue转化成$viewValue，然后在指令模板中进行渲染。 
 
  
   
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  
    // $formatters接受一个数组
// 数组是一系列方法，用于将modelValue转化成viewValue
ngModelController.$formatters.push(modelValue) {
    var unit = 0,i,unitName;
    modelValue = parseInt(modelValue || 0);
 
    for (i = multiplierTypes.length-1; i >= 0; i--) {
        unitName = multiplierTypes[i];

        if (modelValue % multiplierMap[unitName] === 0) {
            unit = unitName;
            break;
        }
    }
    
    if (modelValue) {
        num = modelValue / multiplierMap[unit];
    }

    return {
        unit: unit,
        num:  num
    };
});
  
   
  
 
 最后返回的对象就是$viewValue的value。（当然$viewValue还会有其他的一些属性。） 
 第二步，我们调用$render方法将$viewValue渲染到指令模板中去。 
 
  
   
    // $render用于将viewValue渲染到指令的模板中
ngModelController.$render = ) {
    scope.unit = ngModelCtrl.$viewValue.unit;
    scope.num = ngModelCtrl.$viewValue.num;
};
  
   
  
 
 第三步，我们通过$watch来监控指令模板中unit变量。当其发生变化时，我们需要更新$viewValue。 
 
  
   
    1
2
3
4
5
6
7
  
    scope.$watch('unit + num',95)">) {
// $setViewValue用于更新viewValue
    ngModelController.$setViewValue({
        unit: scope.unit,
        num: scope.num
    });
});
  
   
  
 
 第四步，我们通过$parsers将$modelValue。 
 
  
   
    // $parsers接受一个数组
// 数组是一系列方法，用于将viewValue转化成modelValue
ngModelController.$parsers.push(viewValue) {
    var unit = viewValue.unit；
    var num = viewValue.num;
    var multiplier;

    multiplier = multiplierMap[unit];

    return num * multiplier;
});
  
   
  
 
 这样一个双方的数据绑定逻辑就建立了。这里有一个在线示例，就是文中示例的完整代码，你可以去体验一下。 
 转载地址：http://blog.gejiawen.com/2015/12/20/using-ng-model-controller-with-angular-directive/
                  


                  总结
                  以上是小编为你收集整理的Angular js指令收录(六)全部内容。
                  如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。
            
          
          

          
            
              

                
                  Angularjs相关文章
                

                
                  
                    AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选
                  
                  ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中文文档更容易理解，前提是你的英语基础还可以。英文文档对于知识点讲述简明扼要，通俗易懂，而有些中文文档读起来特别费力，基础差、底子薄的有可能一会就会被绕晕了，最起码英文文档中的代码与中文文档中的代码是一致的，但知识点讲述实在是差距太大。Angular.jshasapowerfuldire
                
                
                
                  
                    AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例
                  
                  AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas 基础上。目前，它支持6种图表类型（折线图，条形图，雷达图，饼图，柱状图和极地区域区）。而且，这是一个独立的包，不依赖第三方 JavaScript 库，小于 5KB。   其中用到的软件：   Chart.js框架，版本1.0.2，一
                
                
                
                  
                    AngularJS进阶(三十七)IE浏览器兼容性后续
                  
                  IE浏览器兼容性后续前言   继续尝试解决IE浏览器兼容性问题，结局方案为更换jquery、angularjs、IE的版本。   1.首先尝试更换jquery版本为1.7.2   jquery-1.9.1.js-->jquery-1.7.2.js--> jquery2.1.4.js 无效   2.尝试更换IE版本IE8   IE11-
                
                
                
                  
                    AngularJS进阶(五)Angular实现下拉菜单多选
                  
                  Angular实现下拉菜单多选写这篇文章时，引用文章地址如下：http://ngmodules.org/modules/angularjs-dropdown-multiselecthttp://dotansimha.github.io/angularjs-dropdown-multiselect/#/AngularJSDropdownMultiselectThisdire
                
                
                
                  
                    AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
                  
                  在AngularJS应用中集成科大讯飞语音输入功能前言   根据项目需求，需要在首页搜索框中添加语音输入功能，考虑到科大讯飞语音业务的强大能力，遂决定使用科大讯飞语音输入第三方服务。软件首页截图如下所示：   涉及的源代码如下所示:  	//语音识别$rootScope.startRecognize = function() {var speech;
                
                
                
                  
                    AngularJS进阶(三十四)Angular数据更新不及时问题探讨
                  
                  Angular数据更新不及时问题探讨前言   在修复控制角标正确变化过程中，发觉前端代码组织层次出现了严重问题。传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染。根据《AngularJs深度剖析与最佳实践》，如果两个控制器的协作存在大量的数据共享和交互可以利用Factory等服务的“单例”特性为它们注入一个共享对象来传递数据。而自己在使用rootScope
                
                
                
                  
                    AngularJS进阶(三)HTML:让表单、文本框只读，不可编辑的方法
                  
                  HTML:让表单、文本框只读，不可编辑的方法有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使中国">的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。方法1:onfocus=this.blur()中国"onfocus=this.blur()>方法2:readonly中国"readonly>中国"readonly="tru
                
                
                
                  
                    AngularJS进阶(十七)在AngularJS应用中实现微信认证授权遇到的坑
                  
                  在AngularJS应用中实现微信认证授权遇到的坑前言      项目开发过程中，移动端新近增加了一个功能“微信授权登录”，由于自己不是负责移动端开发的，但最后他人负责的部分未达到预期效果。不能准确实现微信授权登录。最后还得靠自己做进一步的优化工作，谁让自己是负责人呢？原来负责人就是负责最后把所有的BUG解决掉。   首先，熟悉一下微信授权部分的源代码，如下所示:
                
                
            
          
        
        
        
        
            
             
          
            



            
          
          
          
          
            
              
                热门文章
                • AngularJS进阶(四)ANGULAR.JS实现下拉菜
• AngularJS进阶(四十一)AngularJS中使用
• AngularJS进阶(三十七)IE浏览器兼容性后
• AngularJS进阶(五)Angular实现下拉菜单
• AngularJS进阶(十八)在AngularJS应用中
• AngularJS进阶(三十四)Angular数据更新
• AngularJS进阶(三)HTML:让表单、文本框
• AngularJS进阶(十七)在AngularJS应用中
• AngularJS进阶(二十七)实现二维码信息的
• AngularJS进阶(十五)Cookie ‘data‘ p
              
            
          
          
          
          
          
            
              
          
    
              
            
          
          
          
         
          
          
            
              
                热门标签更多
                HTMLreactjsCSSNode.jsangulartypescriptvue.jsreact-natispringkotlinAPIseleniumtensorflowbashangularJSexpressxcodematplotlibflaskHibernatedictionaryrailscocoswebnpmreact-hookmongoosegoogle-appformswpfRestwebpackunit-testihttpclassfileNext.jsJsHTML5bootstrap-

              
            
          
          
          
          
          
          
              




          
          
          
        
        
      
    
    
  
    
      
        
        友情链接:

          菜鸟教程
        

          前端之家
        

          编程小课
        
          
        小编
 - 我要投稿
 - 广告合作
 - 联系我们
 - 免责声明
 - 网站地图
        
        版权所有 © 2018 小编 闽ICP备13020303号-8
      
      微信公众号搜"程序精选"关注
微信扫一扫可直接关注哦！

今天关于AngularJS常用插件与指令收集和angular 插件的讲解已经结束，谢谢您的阅读，如果想了解更多关于3个可以改善用户体验的AngularJS指令介绍_AngularJS、Angular js 常用插件、Angular js指令收录(五)、Angular js指令收录(六)的相关知识，请在本站搜索。

本文标签：

AngularJS常用插件与指令收集（angular 插件）