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. 在VMware Workstation11虚拟机上安装黑苹果

    图文详解如何在VMware Workstation11虚拟机上安装黑苹果Mac OS X 10.10系统-网络教程与技术 -亦是美网络 http://www.yishimei.cn/network/5 ...

  2. 如何用js实现截取一个字符串中的数字

    比如var v ="我要提问1098";var v="我0要提问"var v="我还是要提问987"等我想要里边的 1098 ,0, 987 ...

  3. 警惕javascript变量的全局污染问题

    作用域的概念总是和变量形影不离,它不是javascript语言独有的概念,只是其运用上与其他大型语言略有不同,JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基 ...

  4. 利用Google Speech API实现Speech To Text

    很久很久以前, 网上流传着一个免费的,识别率暴高的,稳定的 Speech To Text API, 那就是Google Speech API. 但是最近再使用的时候,总是返回500 Error. 后来 ...

  5. codeforces 616E Sum of Remainders (数论,找规律)

    E. Sum of Remainders time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  6. npm install时报错 npm ERR!Windows_NT 6.1.7601

    解决办法:先设置代理为空 npm config set proxy null, 然后再npm install cnpm -g --registry=https://registry.npm.taoba ...

  7. Android系列之网络(三)----使用HttpClient发送HTTP请求(分别通过GET和POST方法发送数据)

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  8. NGUI图片字(Bitmap图片转文字)

    用图片字而不是图片 美术和程序的配合,需要程序能够很快抓住问题重点并提出解决方案.美术出的图片字比我们使用的字体更好好看,那么是否要一个个图片去拼成数字呢? NGUI创建图片字 准备材料 美术提供的数 ...

  9. Enem 实用方法

    前言 在项目中的多处使用到了枚举,比如:道具种类(PowerupType) 游戏任务(MissionType),记录一下有关枚举的一些方法 枚举 public enum MissionType { R ...

  10. scp: command not found如何解决

    今天给一台新的服务器,准备源码安装一些软件,需要使用scp复制文件时报错如下:-bash: scp: command not found 解决办法如下:安装scp的软件包:# yum install ...