创建 AngularJS 自定义过滤器，带自定义参数_Linux编程_Linux公社-Linux系统门户网站
你好，游客
创建 AngularJS 自定义过滤器，带自定义参数
来源：oschina.net &
作者：徐继开
Angularjs过滤器是 angularjs非常棒的特性之一。有朝一日，你可能需要使用自定义过滤器，幸运的是，你找到了这篇博文。
下面显示的是自定义过滤器长什么样子(请注意myfilter):
&tr ng-repeat="friend in friends |myfilter:'param1':'param2':true:'windowScopedFilter'"&
我们的自定义过滤器叫做 "myfilter", 它有由 ':'隔开的4个参数. 这是一个将会用到的样本输入:
$scope.friends = [{name:'John', phone:'555-1276'},
{name:'Annie', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'David', phone:'555-8765'},
{name:'Mikay', phone:'555-5678'}];
过滤"555"的处理流程由 "windowScopedFilter"执行, 它是过滤器 'myfilter'的第四个参数.
下面我们来实现这些功能 (把logging添加到每个输入参数):
var myapp = angular.module('MyFilterApp', []);
myapp.filter('myfilter', function() {
return function(input, param1) {
console.log("------------------------------------------------- begin dump of custom parameters");
console.log("input=",input);
console.log("param1(string)=", param1);
var args = Array.prototype.slice.call(arguments);
console.log("arguments=", args.length);
if (3&=args.length) {
console.log("param2(string)=", args[2]);
if (4&=args.length) {
console.log("param3(bool)=", args[3]);
console.log("------------------------------------------------- end dump of custom parameters");
if (5&=args.length) {
return window[args[4]](input);
上面的代码大多都log了(译者注：将信息显示到控制台). 实际完成过滤的最重要的一部分是:
if (5&=args.length) {
return window[args[4]](input);
"return window[args[4]](input)" 调用第四个参数, 它是 'windowScopedFilter'.这是控制台输出:
"------------------------------------------------- begin dump of custom parameters" custom_filter_function.html:21
"input=" [object Array] custom_filter_function.html:22
"param1(string)=" "param1" custom_filter_function.html:23
"arguments=" 5 custom_filter_function.html:25
"param2(string)=" "param2" custom_filter_function.html:27
"param3(bool)=" true custom_filter_function.html:30
"------------------------------------------------- end dump of custom parameters" custom_filter_function.html:32
"------------------------------------------------- begin dump of custom parameters" custom_filter_function.html:21
"input=" [object Array] custom_filter_function.html:22
"param1(string)=" "param1" custom_filter_function.html:23
"arguments=" 5 custom_filter_function.html:25
"param2(string)=" "param2" custom_filter_function.html:27
"param3(bool)=" true custom_filter_function.html:30
"------------------------------------------------- end dump of custom parameters" custom_filter_function.html:32
&script src="angular.min.js"&&/script&
&script type="text/javascript"&
function windowScopedFilter (input) {
var output = [];
angular.forEach(input, function(v,k){
if (v.phone.contains("555")) {
output.push(v);
var myapp = angular.module('MyFilterApp', []);
myapp.filter('myfilter', function() {
return function(input, param1) {
console.log("------------------------------------------------- begin dump of custom parameters");
console.log("input=",input);
console.log("param1(string)=", param1);
var args = Array.prototype.slice.call(arguments);
console.log("arguments=", args.length);
if (3&=args.length) {
console.log("param2(string)=", args[2]);
if (4&=args.length) {
console.log("param3(bool)=", args[3]);
console.log("------------------------------------------------- end dump of custom parameters");
if (5&=args.length) {
return window[args[4]](input);
myapp.controller('MyFilterController', ['$scope', function($scope) {
$scope.friends = [{name:'John', phone:'555-1276'},
{name:'Annie', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'David', phone:'555-8765'},
{name:'Mikay', phone:'555-5678'}];
&body ng-app="MyFilterApp"&
&div ng-controller="MyFilterController"&
&table id="searchTextResults"&
&tr&&th&Name&/th&&th&Phone&/th&&/tr&
&tr ng-repeat="friend in friends |myfilter:'param1':'param2':true:'windowScopedFilter'"&
&td&{{friend.name}}&/td&
&td&{{friend.phone}}&/td&
带你走近AngularJS系列：
带你走近AngularJS - 基本功能介绍
带你走近AngularJS - 体验指令实例
带你走近AngularJS - 创建自定义指令
如何在 AngularJS 中对控制器进行单元测试
在 AngularJS 应用中通过 JSON 文件来设置状态
AngularJS 之 Factory vs Service vs Provider
AngularJS && 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据
AngularJS 的详细介绍：AngularJS 的下载地址：
本文永久更新链接地址：
相关资讯 & & &
& (07/24/:43)
& (08/11/:41)
& (02月22日)
& (01/04/:49)
& (08/11/:34)
　　　同意评论声明
　　　发表
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款带你走近AngularJS系列：
------------------------------------------------------------------------------------------------
为什么使用AngularJS 指令？
使用过 AngularJS 的朋友应该最感兴趣的是它的指令。现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能，并且AngularJS 是目前唯一提供Web应用可复用能力的框架。
目前有很多JavaScript 产品提供插件给Web开发人员。例如，
就是当前比较流行的提供样式和JavaScript插件的前端开发工具包。但是开发人员在使用Booostrap中的插件时， 必须切换到JavaScript 模式来写 jQuery 代码来激活插件虽然jQuery 代码写起来十分简单，但是必须和HTML进行同步，这是一个单调乏味且容易出错的过程。
AngularJS主页展示了一个简单的例子，用于实现Bootstrap中的 Tab功能，可以在页面中轻松添加 Tab 功能，并且使用方法和 ul 标签一样简单。HTML代码如下：
&body ng-app="components"&
&h3&BootStrap Tab Component&/h3&
&pane title="First Tab"&
&div&This is the content of the first tab.&/div&
&pane title="Second Tab"&
&div&This is the content of the second tab.&/div&
JavaScript代码如下：
angular.module('components', []).
directive('tabs', function() {
restrict: 'E',
transclude: true,
scope: {},
controller: [ "$scope", function($scope) {
var panes = $scope.panes = [];
$scope.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
pane.selected = true;
this.addPane = function(pane) {
if (panes.length == 0) $scope.select(pane);
panes.push(pane);
'&div class="tabbable"&' +
'&ul class="nav nav-tabs"&' +
'&li ng-repeat="pane in panes" ng-class="{active:pane.selected}"&'+
'&a href="" ng-click="select(pane)"&{{pane.title}}&/a&' +
'&div class="tab-content" ng-transclude&&/div&' +
replace: true
directive('pane', function() {
require: '^tabs',
restrict: 'E',
transclude: true,
scope: { title: '@' },
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
'&div class="tab-pane" ng-class="{active: selected}" ng-transclude&' +
replace: true
你可以从以下链接查看效果：
正如你所见，除了拥有用于实现指令的 &tabs& 和&pane& 标签，页面和常规HTML页面没有什么区别。HTML开发人员无需编写任何代码。当然，总需要有第一个吃螃蟹的人，创建指令共享使用，但是目前Tabs指令已经很常见了，可以在任何地方复用（如,、、, 和一些知名的前端插件集）。
由于指令的易用和易编写，许多用户已经开始使用AngularJS编写指令了。例如， AngularJS 开发组已经基于AngularJS实现了一系列指令- 来代替Bootstrap； 知名ComponentOne 控件厂商也在AngularJS 基础上创建了 ；我们也可以在GitHub上找到一些公共指令资料库：。
拥有了 AngularJS，是不是觉得自己已经站在了巨人的肩膀上了？但是不要高兴的太早，如果已经有了这么多的指令供我们使用，那我们为什么还要学习AngularJS ，为什么还要学习自定义指令呢？
举个简单的例子，也许你有特殊的需求：假设你在一家财务公司工作，你需要创建一张财务表单，它需要以表格的形式展示数据、拥有绑定、编辑、校验并且同步数据更新到服务器的功能。表单插件很常见但是能够满足这些具体需求的不得而知了，所以你必须根据实际业务需求来创建自定义指令。
&body ng-app="abcFinance"&
&h3&Offshore Investment Summary&/h3&
&abc-investment-form
customer="currentCustomer"
country="currentCountry"&
&/abc-investment-form data&
这就是本篇文章的目的，接下来我们会讨论如何创建 AngularJS指令。
创建自定义AngularJS 指令
文章开头的自定义指令十分的简单。它仅仅实现了同步的功能。一般指令是包含更多元素的：
//创建指令模块 (或者检索现有模块)
var m = angular.module("myApp");
// 创建"my-dir"指令
myApp.directive("myDir", function() {
restrict: "E",
// 指令是一个元素 (并非属性)
// 设置指令对于的scope
name: "@",
// name 值传递 （字符串，单向绑定）
amount: "=",
// amount 引用传递（双向绑定）
// 保存操作
// 替换HTML (使用scope中的变量)
{{name}}: &input ng-model='amount' /&" +
&button ng-click='save()'&Save&/button&" +
replace: true,
// 使用模板替换原始标记
transclude: false,
// 不复制原始HTML内容
controller: [ "$scope", function ($scope) { &
link: function (scope, element, attrs, controller) {&}
效果如下：
注意这个自定义指令遵循一种格式：以"my" 为前缀，类似于命名空间，因此如果你在应用中引用了多个模块指令，你可以通过前缀很容易的判断出它是在哪定义的。这不是硬性要求，但是这样做可以带来很多便利。
指令的构造函数会返回带有属性的JavaScript 对象。这些内容在AngularJS 主页中都有清晰说明。以下是我对一些属性的理解：
restrict: 说明指令在HTML中的应用形式，备选项有"A"、"E" 和 "C"， "M" ，分别代表 attribute、element、class和comment（默认值为"A"）。我们将更多的关注attributes-如何创建UI元素。
scope: 创建指令的作用范围，scope在指令中作为属性标签传递。Scope 是创建可以复用指令的必要条件，每个指令（不论是处于嵌套指令的哪一级）都有其唯一的作用域，它不依赖于父scope。scope 对象定义names 和types 变量。上面的例子即创建了3个scope变量。
name: "@" （值传递，单向绑定）：
"@"符号表示变量是值传递。指令会检索从父级scope中传递而来字符串中的值。指令可以使用该值但无法修改，是最常用的变量。
amount: "=" （引用,双向绑定）
"="符号表示变量是引用传递。指令检索主Scope中的引用取值。值可以是任意类型的，包括复合对象和数组。指令可以更改父级Scope中的值，所以当指令需要修改父级Scope中的值时我们就需要使用这种类型。
save: "&" (表达式)
&&&符号表示变量是在父级Scope中启作用的表达式。它允许指令实现比修改值更高级的操作。
template: 替代原始模板中的标记的字符串。替换功能将替换所有旧元素为新值。注意template是如何使用Scope中定义的变量的。这允许你无需写任何额外的代码即可创建macro-style 风格指令。replace: 说明是否替换原始标记中的值或是追加原始标记中的值。默认值是false，这时原始标记将被保留。
transclude: 说明自定义指令是否复制原始标记中的内容。例如，之前展示的&tab&指令设置了transclude 为 true，因为tab 元素包含其他HTML 元素。 "dateInput" 指令则需要在初始化时为空，所以需要设置transclude 为false。
link: 该方法在指令中扮演着重要的角色。它负责执行DOM 操作和注册事件监听器等。link 方法包含以下参数：
scope: 指令Scope的引用。scope 变量在初始化时是不被定义的，link 方法会注册监视器监视值变化事件。
element: 包含指令的DOM元素的引用， link 方法一般通过jQuery 操作实例（如果没有加载jQuery，还可以使用Angular's jqLite ）。
controller: 在有嵌套指令的情况下使用。这个参数作用在于把子指令的引用提供给父指令，允许指令之间进行交互， tab 指令就是使用该参数较典型的例子：
注意，当调用link 方法时， 通过值传递（"@"）的scope 变量将不会被初始化，它们将会在指令的生命周期中另一个时间点进行初始化，如果你需要监听这个事件，可以使用scope.$watch 方法。
好了，以上即为自定义指令需要用到基本知识描述。如果你仍然不熟悉指令，最好的方法就是动手实现几个小例子，可以在fiddle中进行实践：
在下一篇文章中我们将一起熟悉几个AngularJS自定义指令。
相关阅读：
阅读(...) 评论()碎片文件:AngularJS基于http请求实现下载php生成的excel文件功能示例
碎片文件本文实例讲述了AngularJS基于http请求实现下载php生成的excel文件功能。分享给大家供大家参考，具体如下：使用PHPExcel插件的同学们都知道，导出excel是直接将生成内容修改content-type来将内容作为文件下载的，这时候需要页面上有一个url，通过点击来下载。那么问题来了，如果在生成excel时有请求参数，只能通过js的http请求，这时候怎么下载呢？研究了一下，有以下几种方式：1. angularjs创建a标签模拟下载// 创建a标签模拟下载function exportExcel(params, filename) {
return $http({
url: '/api/exportExcel',
method: "POST",
headers: {
'Content-type': 'application/json'
params: params,
responseType: 'arraybuffer'
}).success(function (data) {
var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
var objectUrl = URL.createObjectURL(blob);
var a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display:none');
a.setAttribute('href', objectUrl);
a.setAttribute('download', filename);
a.click();
URL.revokeObjectURL(objectUrl);
});}这个方式中要注意，如果传输的是xls，也就是excel5文件，type要设置为application/vnd.ms-excel 或application/x-excel。2. js将请求参数生成url，创建a标签// 生成下载url$scope.data.down_url = "../c_potential/get_excel?end_time="+$scope.end_date+"&liable="+liable+"&nickname="+$scope.data.nickname+"&province="+$scope.data.province_cur+"&start_time="+$scope.start_然后将url绑定到某个a标签中，这种方式适合参数较少的情况，而且数据不会经过二次处理，不易发生error，唯一的缺点是需要处理两次，可以设置两个按钮，一个为生成，将参数写入url中，第二个按钮为下载excel。虽然用户是两次操作，但实际上只发生了一次http请求，不会影响性能。3. 先生成后下载第三种方式类似第二种，首先生成excel文件，储存到服务器，然后下载。涉及到磁盘IO，所以性能比较低，不推荐这种方式，只是作为一个方法记录下来。angularjs模拟下载的方式最方便，但有可能出现error，第二种方式最保险。更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《》、《》及《》希望本文所述对大家AngularJS程序设计有所帮助。AngularJS自定义指令 - 简书
AngularJS自定义指令
使用.directive()方法来注册一个新指令
传入两个参数，第一个参数传入一个字符串，作为指令的名字；第二个参数是一个函数，该函数返回一个对象，返回的对象中包含了用来定义和配置指令所需的方法和属性。
创建一个自定义元素my-directive
// index.html
&my-directive&&/my-directive&
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
restrict: 'E',
template: '&dir&Nari&/dir&'
创建的指令在html文件中不仅可以用作元素，还可以作为属性，类或者注释使用
&my-directive&&/my-directive&
&div my-directive&&/div&
&div class="my-directive"&&/div&
&!--directive:my-directive--&
restrict设置以哪种方式调用：元素（E） 、属性（A） 、类（C）、注释（M）
向指令传递数据 scope： {}
template可接受变量的形式：template: '&dir&{{ varName }}&/dir&'
在html文件中，可以给指令添加var-name属性，该参数会成为指令内部作用域的属性
双向绑定的问题：如果是在事件处理函数（event handler）中改变了绑定model，需要手动触发digest，因为这是发生在angular范围之外，所以scope无法知道model的变化，如下：
element.on('click', function() {
$scope.modal = newM
$scope.$apply();
// index.html
&div my-directive var-name="Nari"&&/div&
app.directive('myDirective', function() {
restrict: 'A',
replace: true,
// 使用隔离作用域，创建指令自己的$scope属性
varName: '@'，
varName: '='，
varName: '&'
template: '&dir&{{ varName }}&/dir&'
'@'： 表示AngularJS将DOM中var-name属性的值复制给新作用域对象中的varName属性，var-name属性改变，作用域对象中的varName属性会自动更新
'='： 表示在指令的作用域和其他model作用域建立了一个双向数据绑定
'&'： 表示在指令的作用域和其他model作用域进行绑定，调用其函数
绑定函数的传参方式有两种：
// 第一种：指令中调用函数时传入一个对象，对象的属性名是html中对应的参数名
// index.html
&div my-directive callback-fun="doSomething(argName)"&&/div&
app.directive('myDirective', function() {
restrict: 'A',
callbackFun: '&'
link: function(scope, ele, attrs) {
// 传入一个对象
scope.callbackFun({argName: value})
// 第二种：html中指定函数名，在指令中调用函数时传参
// index.html
&div my-directive callback-fun="doSomething"&&/div&
app.directive('myDirective', function() {
restrict: 'A',
callbackFun: '&'
link: function(scope, ele, attrs) {
// scope.callbackFun()相当于获取该函数引用，然后正常调用函数
scope.callbackFun()(arg1, arg2, ...)
模板 template templateUrl
定义指令模板，
template指定模板HTML字符串
templateUrl可以指定模板路径或者一个函数，函数可以接受两个参数tElement和tAttrs，并返回一个代表模板的字符串
引入外部指令 require
查找该值对应的指令，将查找到的指令的控制器注入到当前指令中
寻找策略：
？策略——寻找指令名称，如果没有找到，link函数第4个参数为null；如果没有？，则报错。
**^ **策略——在自身指令寻找指令名称的同时，向上父元素寻找；如果没有^，则仅在自身寻找。
指令控制器 controller controllerAs
可定义一个匿名函数或传入一个控制器名
指令的控制器和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为,但link函数只能在当前内部指令中定义行为,且无法在指令间复用。
controller: function($scope, $element, $attrs){
// 可以注入一些服务，$scope就是当前作用域，$element当前指令对应的元素，$attrs当前元素的属性组成的对象
优先级控制 terminal
可以被设置为true或false，设为true时会使AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行
程序媛。二次宅。
【JS-8】 angular js自定义指令 directive 如何使用？为什么要使用封装的自定义指令？ 小课堂【武汉分院第130期】 分享人：徐恒 目录 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 7.参考文献 8.更多讨论 一....
1.背景介绍 指令是angularjs最重要的特性之一，通过自定义指令，我们可以将html与js封装成一个独立的模块，使HTML标签的范围扩展到无穷大。在directive，compile和link是其最重要的两个属性。 2.知识剖析 自定义指令的基本结构： dirAppM...
自定义指令简单介绍及使用 自定义指令无外乎增强了HTML,提供了额外的功能。 内部指令基本能满足我们的需求。 少数情况下我们有一些特殊的需要，可以通过自定义指令的方式实现： 通过 模块对象的directive方法创建有两个参数，第一个参数，是指令的名字：必须是驼峰命名法命名...
自定义指令需要用到模块对象的directive函数，以模块对象.directive('指令名称',[function(){return{...}}]);。第一个参数指令名称，必须遵守驼峰命名规则，即指令名称在使用的时候xxx-xxx...例：ng-click，在作为dire...
下面来看一个非常简单的指令： 一般，比较少的指令，我们直接使用template是可以的，但是当需要用到很多HTML代码的时候，很显示，需要拼接很多的字符串，虽然ES6拼接字符串比较好用，但是看上去还是很不优雅，所以，angularJS提供了templateUrl这样一个配置...
今天，心情比较的不错，就亲力亲为写一点东西，我超级的喜欢写作，自从天践行第二阶段开始，我就开始每天坚持写作了，写作是最好的输出方式，也是逐步打开智慧的最佳方式。现在，我要谈一个非常重要的话题，你的所有坚持都不会白费，都会给你带来不可思议、令你瞠目结舌...
今从城西办事归来，趁着这难得的好天气，决定徒步回城南，虽说路途还是有点遥远，但是喜欢一个人行走，走走停停看路边风景无数。在这些风景里深深地陶醉，细细地品味。 路过位于洲河岸边一处不大的小山坡，记得多年前还是在小城念师范时和同学们来过几次。不大的小山，是那些年小城人烧香拜佛的...
很多人说，你在一件事上，投入超过一万小时，你就能在这件事上成功。对于写字，纯粹是记录自己的生活，抒发自己的想法，与自己内心交流对话，因为有的时候，你心里想的，跟你写出来的内容，并不是一回事。我每次看我自己写出来的东西后，我都会有种，啊，原来，我是这么想的？或者，我是这么表达...
文/爱学习的飞哥 ‖飞哥有话说，专注于探求大学生学习、读书、生活那些事。 1 你是否总有这样的经历，一大早背起书包来到图书馆，计划要完成某篇论文的大纲，但当拿起手机的时候，还是忍不住去刷一下，觉得玩一下不会影响到学习的任务。但刷完之后，去投入工作，发现自己很难学的进，反而当...
扎克伯格2017年的哈佛演讲传遍了朋友圈。以前对扎克伯格的了解仅限于：脸书的创始人；最年轻的亿万富翁；娶了一位其貌不扬但才华横溢的华裔女性；生了女儿后把大部分财产捐助在公益事业。今天听了两遍他的哈佛毕业演讲，每次都被感动到热泪盈眶，也发自肺腑的敬佩这位改变世界的年轻人。 他...在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
想要循环绑定ng-model，怎么才能保证ng-model的命名不一样呢
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
&div ng-repeat="item in arr"&
&input ng-model="inputs[$index]"&
存在$scope.inputs数组
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。