angular的插件太少了,  所以很多指令和过滤器都要自己写,  所以对指令传进来的参数, 以及angular编译的流程更加熟悉才行写出好的插件, 有些简单的指令是参考angularUI里面, 作为自己的angular指令笔记;

　　1：angular的字符串截取指令

　　2：angular的国际化

　　3：angular的xhr案例

　　4：自己写angular中的for指令书写;

　　第一个是truncate， 这就是溢出隐藏的效果， css中是通过text-overflow:ellipsis; overflow:hidden; display:block 实现的, 如果JS要实现这些效果,也很简单, 现在通过angular的指令实现了, 感觉爽爽哒, 因为是在chrome下写的demo所以没有做别的浏览器兼容，chrome的开发工具太强大了啦 , 自己点击打开即可查看啦， 啦啦啦， 你懂的, 为什么要这么多"啦"啦;

<html ng-app="app">

    <head>

        <meta charset="utf-8" />

        <script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>

        <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    </head>

<body ng-controller="test0Controller">

    <ul>

        <li ng-repeat="s in strs">

            {{s | characters:8}}

        </li>

    </ul>

    <script type="text/javascript">

        var app = angular.module("app",["truncate"]);

        app.controller("test0Controller" , function($scope) {

            $scope.strs = [

                "test0Controller",

                "test20Con2troller1",

                "2test20Controller2",

                "tes2t0Contr2oller"

            ];

        });

        angular.module("truncate",function(){})

        .    filter("characters",function(){

            return function(input , number) {

                return typeof input === "string" ?

                    input.length < number ?

                    input : (input.slice(0,number-4) + "....")

                : input

            }

        });

    </script>

</body>

</html>

　　angular有个大名鼎鼎的国际化（angular国际化）的插件都知道了，但是用的人不多啊， 如果要自己实现国际化该如何实现呢， 可以参考我的指令， 10行代码就足够了;

<html ng-app="app">

    <head>

        <meta charset="utf-8" />

        <script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>

        <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    </head>

<body>

    <div translatediv ng-controller="tr">

        {{hehe}}//

        <br>

        <button ng-click="setLanguage('ch')">

            ch

        </button>

        <button ng-click="setLanguage('en')">

            en

        </button>

        <button ng-click="setLanguage('default')">

            default

        </button>

    </div>

    <script type="text/javascript">

        var app = angular.module("app",["translate"]);

        app.controller("tr", function($scope,$timeout) {

            $scope.trans = {

                en : {"hehe" : "enenen"},

                ch : {"hehe" : "chchch"},

                default : {"hehe" : "nimo"}

            };

        });

        angular.module("translate",function() {})

        .factory("cache", function() {

            var arr = [];

            return {

                set : function(arg) {arr.push(arg); return arr.splite(arr.indexOf(arg),1) },

                del : function(arg) { return arg === arr.splite(arr.indexOf(arg),1)  }

            }

        })

        .directive("translatediv",["cache","$timeout",function(cache,$timeout) {

            return {

                link : function($scope, $elem, $attr) {

                    var trans = $scope.trans;

                    $scope.setLanguage = function(arg) {

                        //alert($scope)

                        for(var prop in trans) {

                            if(arg === prop) {

                                for(var nameVar in trans[prop]) {

                                    $scope[nameVar] = trans[prop][nameVar];

                                };

                            };

                        };

                    };

                    $timeout(function(){

                        $scope.setLanguage("default");

                    },0);

                }

            }

        }])

    </script>

</body>

</html>

　　实现要说的是filltext这个网站真心不错，老外真是无聊到家了， 前台只要请求一个url就返回一堆假数据（mock），比如：http://filltext.com/?rows=10&fname={firstName}&lname={lastName}&callback=JSON_CALLBACK , 这个例子非常简单, 话说angular和jQ思想真的差别很大啊；

<html ng-app="app">

    <head>

        <meta charset="utf-8" />

        <script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>

        <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    </head>

<body>

    <div ng-controller="refresh">

        <angular-refresh url="http://filltext.com/?rows=10&fname={firstName}&lname={lastName}&callback=JSON_CALLBACK" ng-model="people" interval="5000" method="jsonp">

        </angular-refresh>

        <ul ng-repeat="person in people">

            <li>{{person.fname}} {{person.lname}}</li>

        </ul>

    </div>

    <script type="text/javascript">

        var app = angular.module("app", []);

        app.controller("refresh", function() {

        });

        app.directive("angularRefresh",function($http,$timeout,$parse) {

            return {

                restrict : "AE",

                transclude : true,

                template : "<div></div>",

                compile : function(elem, attrs) {

                    var interval = attrs.interval;

                    return function($scope, $elem, $attrs ) {

                        var xhr = function() {

                            $http[$attrs.method]($attrs.url).then(function(data){

                                $parse($attrs.ngModel).assign($scope,data.data);

                            },function(){alert("wrong")})

                        };

                        $timeout(function() {

                            xhr();

                        }, parseInt($attrs.interval) || 5000 );

                    }

                }

            }

        });

    </script>

</body>

</html>

　　angular中的for指令真是太好用了, 如果自己实现一个岂不是更好。 其实angular最厉害还是双向绑定， 和指令联合在一起 ，从另一种方面来说就是：“酷炫”：

<html ng-app="app">

    <head>

        <meta charset="utf-8" />

        <script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>

        <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    </head>

<body>

    //自定义指令实现forin循环

    <div ng-controller="forin">

        <div>

            {{xs | json}}

        </div>

        <for x in xs>

            <p>{{ x }}</p>

        </for>

        <button ng-click="xs = [1,2,3,4,5,6,7,8]">change</button>

    </div>

    <script type="text/javascript">

        var app = angular.module("app", []);

        app.controller("forin", function( $scope ) {

            $scope.xs = ["0adsf22","1sdf","sdf2","3adsf","4sdf"];

        });

        app.directive("for", function($compile) {

            return {

                restrict : "AE",

                replace : true,

                compile : function(ele, attrs, cloneTransclude) {

                    var outerHTML = ele.get(0).outerHTML;

                    //debugger;

                    var regResult = outerHTML.match(/for([\s\w=\"]*)in([\s\w=\"]*)/i);

                    var prop  = regResult[1].match(/[a-z]/g).join("");

                    var props  = regResult[2].match(/[a-z]/g).join("");

                    var compile = $compile(ele.html())

                    ele.empty();

                    return function($sc, $ele, $attrs) {

                        //这个有报了一个undefined, 不知道是什么原因, 你们知道的话指导我下;

                        //监听这个对象是否发生改变;

                        $sc.watch(props,function() {

                            for(var i=0, len = $sc[props].length ;i<len;i++) {

                                var newSc = $sc.$new();

                                newSc[prop] = $sc[props][i];

                                var node = compile(newSc,angular.noop);

                                $ele.append(node);

                            };

                        });

                    }

                }

            }

        });

    </script>

</body>

</html>

　　上次大概浏览了angular的源代码， 对写出更好的指令还是有帮助的， 就像用jq看jQ源码一样的。

angular实例教程(用来熟悉指令和过滤器的编写)的更多相关文章

  1. vue-品牌管理案例-指令和过滤器

    过滤器的基本使用 定义一个过滤器 <div id="app"> <p>{{ msg | msgFormat('疯狂+1', '123') | test }} ...

  2. angular实例

    angular实例教程(用来熟悉指令和过滤器的编写) angular的插件太少了,  所以很多指令和过滤器都要自己写,  所以对指令传进来的参数, 以及angular编译的流程更加熟悉才行写出好的插件 ...

  3. BPEL 实例教程

    http://www.oracle.com/technetwork/cn/articles/matjaz-bpel1-090722-zhs.html BPEL 实例教程 作者:Matjaz Juric ...

  4. 转载 《AngularJS》5个实例详解Directive（指令）机制

    <AngularJS>5个实例详解Directive(指令)机制 大漠穷秋 本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请 ...

  5. [Python][flask][flask-wtf]关于flask-wtf中API使用实例教程

    简介:简单的集成flask,WTForms,包括跨站请求伪造(CSRF),文件上传和验证码. 一.安装(Install) 此文仍然是Windows操作系统下的教程,但是和linux操作系统下的运行环境 ...

  6. Windows 8实例教程系列 - 开篇

    原文:Windows 8实例教程系列 - 开篇 2012年10月26日,微软发布Windows 8操作系统以及自主品牌平板电脑Surface,Windows作为世界上最流行的操作系统,发布一周内,下载 ...

  7. Windows 8实例教程系列 - 布局控制

    原文:Windows 8实例教程系列 - 布局控制 与传统应用类似,Windows store应用允许开发人员通过布局控件管理应用UI. 本篇将讨论Windows8布局设计控制. Windows 8布 ...

  8. 运行caffe自带的mnist实例教程

    运行caffe自带的mnist实例教程 本文结合几篇博文总结下来的,附上其中一篇原博文链接以供参考:http://blog.sina.com.cn/s/blog_168effc7e0102xjr1.h ...

  9. Android中ViewPager实现滑动条及与Fragment结合的实例教程

    ViewPager类主要被用来实现可滑动的视图功能,这里我们就来共同学习Android中ViewPager实现滑动条及与Fragment结合的实例教程,需要的朋友可以参考下 自主实现滑动指示条先上一个 ...

随机推荐

  1. UVA 10827 Maximum sum on a torus （LA）

    算法入门经典训练指南88页练习 ::这道题只要把原矩阵扩大4倍,那么其跟最大子矩阵的题目就很类似,把二维转化成一维,求最大的序列和,不过这个序列的长度不能超过n. 长度不能超过n? 那这道题又跟hdu ...

  2. linux64位android项目R文件无法生成以及Cannot run program adb

    1.本机kali2.0  64位,kali基于Debian. 2.android adb是32位,64位linux要安装32位依赖库,注意ia32-lib被lib32z1替代. 3.执行命令 sudo ...

  3. linux搭建mysql 5.6.28

    1.下载rmp文件 http://dev.mysql.com/downloads/mysql/ 2.安装 rpm -ivh MySQL-server--.linux_glibc2..x86_64.rp ...

  4. C中不安全函数

    C 中大多数缓冲区溢出问题可以直接追溯到标准 C 库.最有害的罪魁祸首是不进行自变量检查的.有问题的字符串操作(strcpy.strcat.sprintf 和 gets).一般来讲,象“避免使用 st ...

  5. 迅为三星Exynos 4412开发板四核Cortex-A9ARM安卓linux开发板

    开发板光盘资料包含:原理图(PDF格式).底板PCB(Allegro格式).驱动程序源码.芯片和LCD数据手册.开发环境.产品使用手册. 4412开发板简介: iTOP-Exynos4412开发板采用 ...

  6. TSQL点滴

    Q1.什么是bookmark lookup? 非聚集索引中叶结点存储的是index keyword 和 rowid(heap table) 或 clusterindex key. 如果查询使用了非聚集 ...

  7. js练习-控制div属性

    要开始练练js了,决定先按照Ferris大大的索引表一个个练,头一个就是控制div属性啦.看似挺简单的,不过平时jquery用惯了,用起来原生js还有点手生呢. 总之就是模仿加练习啦,先看看效果: 一 ...

  8. ZOJ 3232 It's not Floyd Algorithm --强连通分量+Floyd

    题意:给你一个传递闭包的矩阵,mp[u][v] = 1表示u可以到达v,为0代表不可到达,问你至少需要多少条边组成的传递闭包符合这个矩阵给出的关系 分析:考虑一个强连通分量,如果这个分量有n个节点,那 ...

  9. POJ 2318 TOYS【叉积+二分】

    今天开始学习计算几何,百度了两篇文章,与君共勉! 计算几何入门题推荐 计算几何基础知识 题意:有一个盒子,被n块木板分成n+1个区域,每个木板从左到右出现,并且不交叉. 有m个玩具(可以看成点)放在这 ...

  10. AC日记——信息传递 洛谷 P2661 （tarjan求环）

    题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知道自己的生日.之后每一 ...