在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
目前我只能做到请求返回是404的时候页面跳转到错误页面
创建拦截器
app.factory('Http404Interceptor', function ($q)
responseError: function (response)
if(response.status == 404){
location.href = appURL.fullUrl + 'error';
return $q.reject(response);
配置拦截器给app
app.config(function ($httpProvider)
$httpProvider.interceptors.push('Http404Interceptor');
但是现在的需求是当请求返回404的时候，重新发起请求到另外一个链接（如：a.php），要怎么写才能让拦截器实现这个功能？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
“请求另外一个链接（如：a.php）”的意思是？请求另一个api获取数据作为fallback?
如果是这个意思，那不是还挺简单的么：
创建拦截器
//之前忘了这里还有个循环依赖的问题，我去
app.factory('Http404Interceptor', function ($q, $injector)
responseError: function (response)
if(response.status == 404){
var $http = $injector.get('$http');
return $http.get('anotherUrl');
return $q.reject(response);
配置拦截器给app
app.config(function ($httpProvider)
$httpProvider.interceptors.push('Http404Interceptor');
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。任何时候，如果我们想要为请求添加全局功能，例如身份认证、错误处理等，在请求发送给服务器之前或服务器返回时对其进行拦截，是比较好的实现手段。
angularJs通过拦截器提供了一个从全局层面进行处理的途径。
四种拦截器
实现 request 方法拦截请求
request: function(config) {
// do something on request success
return config || $q.when(config);
该方法会在 $http 发送请求后台之前执行，因此你可以修改配置或做其他的操作。该方法接收请求配置对象(request configuration object)作为参数，然后必须返回配置对象或者 promise 。如果返回无效的配置对象或者 promise 则会被拒绝，导致 $http 调用失败。
实现 requestError 方法拦截请求异常
requestError: function(rejection) {
　　// do something on request error　　return $q.reject(rejection);
有时候一个请求发送失败或者被拦截器拒绝了，请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置，比如说关闭进度条，激活按钮和输入框什么之类的。
实现 response 方法拦截响应
response: function(response) {
　　// do something on response success
return response || $q.when(response);}
该方法会在 $http 接收到从后台过来的响应之后执行，因此你可以修改响应或做其他操作。该方法接收响应对象(response object)作为参数，然后必须返回响应对象或者 promise。响应对象包括了请求配置(request configuration)，头(headers)，状态(status)和从后台过来的数据(data)。如果返回无效的响应对象或者 promise 会被拒绝，导致$http 调用失败。
实现 responseError 方法拦截响应异常
responseError: function(rejection) {
// do something on response error　　return $q.reject(rejection);
有时候我们后台调用失败了，也有可能它被一个请求拦截器拒绝了或者被上一个响应拦截器中断了。在这种情况下，响应异常拦截器可以帮助我们恢复后台调用。
拦截器核心
拦截服务工厂
var app = angular.module("ajaxHttp", []);
app.factory("httpInterceptor", [ "$q", "$rootScope", function($q, $rootScope) {
request: function(config) {
// do something on request success
return config || $q.when(config);
　　 requestError: function(rejection) {
　　　　 // do something on request error
　　　　 return $q.reject(rejection)
response: function(response) {
// do something on response success
return response || $q.when(response);
responseError : function(rejection) {
// do something on response error
return $q.reject(rejection);
注册拦截工厂方法
app.config(["$httpProvider", function($httpProvider) {
　　$httpProvider.interceptors.push("httpInterceptor");
对401，404的拦截处理
app.config(["$httpProvider", function($httpProvider) {
$httpProvider.interceptors.push('httpInterceptor');
app.factory("httpInterceptor", ["$q", "$injector", function($q, $injector) {
"responseError": function(response) {
if (response.status == 401) {
var rootScope = $injector.get('$rootScope');
var state = $injector.get('$rootScope').$state.current.
rootScope.stateBeforLogin =
rootScope.$state.go("login");
return $q.reject(response);
else if (response.status === 404) {
console.log("404!");
return $q.reject(response);
原文地址：http://www.jb51.net/article/77318.htm
阅读(...) 评论()详解AngularJS中的http拦截
转载 & & 作者：Darren Ji
这篇文章主要为大家详细介绍了AngularJS中的http拦截，$http服务允许我们与服务端交互，有时候我们希望在发出请求之前以及收到响应之后做些事情。即http拦截,需要的朋友可以参考下
http拦截，即$http服务允许我们与服务端交互，有时候我们希望在发出请求之前以及收到响应之后做些事情。
$httpProvider包含了一个interceptors的数组。
我们这样创建一个interceptor。
app.factory('myInterceptor', ['$log', function($log){
$log.debug('');
var myInterceptor = {};
return myI
接着注册interceptor.&
app.config(['$httpProvider', function($httpProvider){
$httpProvider.interceptors.push('myInterceptor');
以下是$http拦截的一些例子。
■ 拦截器中的异步操作
app.factory('myInterceotpr','someAsyncServcie', function($q, someAsyncServcie){
var requestInterceptor = {
request: function(config){
var deferred = %q.defer();
someAsyncService.doAsyncOperation().then(function(){
deferred.resolve(config);
}, function(){
deferred.resolve(config);
return deferred.
return requestI
以上，是一个请求拦截，做了一个异步操作，根据异步操作的结果来更新config。
当然也有响应拦截。
app.factory('myInterceptor',['$q', 'someAsyncService', function($q, someAsyncSercice){
var responseInterceptor = {
response: function(response){
var deferred = $q.defer();
someAsyncService.doAsyncOperation().then(function(response){
deferred.resolve(response);
}, function(response){
deferred.resolve(response);
return deferred.
return responseI
■ Session拦截，请求拦截
服务端有2种类型的验证，一个是基于cookie的，一种是基于token的。对于基于token验证，当用户登录，获取一个来自服务端的token，这个token在每一次请求时发送给服务端。
创建一个有关session的injector:
app.factory('sessionInjector',['SessionService', function(SessionService){
var sessionInjector = {
request: function(config){
if(!SessionService.isAnonymous){
config.headers['x-session-token'] = SessionService.
return sessionI
可见，把从服务端返回的token放在了config.headers中。
注册injector:
app.config(['$httpProvider', function($httpProvider){
$httpProvider.interceptors.push('sessionInjector');
发出一个请求：
$http.get('');
拦截前大致是：
"transformRequest":[null],
"transformResponse":[null],
"method":"GET",
"headers":{
"Accept": "application/json, text/plain,*/*"
拦截后，在headers中多两个一个x-session-token字段:
"transformRequest":[null],
"transformResponse":[null],
"method":"GET",
"headers":{
"Accept": "application/json, text/plain,*/*",
"x-session-token":......
■ 时间戳，请求和响应拦截
app.factory('timestampMarker',[function(){
var timestampMarker = {
request:function(config){
config.requestTimestamp = new Date().getTime();
response: function(response){
response.config.responseTimestamp = new Date().getTime();
return timestampM
以上，在请求和响应时拦截，在config.requestTimestamp和config.responseTimestamp赋上当前的时间。
注册拦截器：
app.config(['$httpProvider', function($httpProvider){
$httpProvider.interceptors.push('timestampMarker');
然后在运用的时候可以算出请求响应所耗去的时间。
$http.get('').then(function(response){
var time = response.config.responseTime - response.config.requestT
console.log('请求耗去的时间为 ' + time);
■ 请求错误恢复，请求拦截
模拟一个请求拦截的错误情形：
app.factory('requestRejector',['$q', function($q){
var requestRejector = {
request: function(config){
return $q.reject('requestRejector');
return requestR
拦截请求错误：
app.factory('requestRecoverer',['$q', function($q){
var requestRecoverer = {
requestError: function(rejectReason){
if(rejectReason === 'requestRejector'){
//恢复请求
transformRequest:[],
transformResponse:[],
method:'GET',
Accept:'application/json, text/plain, */*'
return $q.reject(rejectReason);
return requestR
注册拦截器：
app.config(['$httpProvider', function($httpProvider){
$httpProvider.interceptors.push('requestRejector');
$httpProvider.interceptors.push('requestRecoverer');
■ Session错误恢复，响应拦截
app.factory('sessionRecoverer',['$q','$injector',function($q, $injector){
var sessionRecoverer = {
responseError: function(response){
//如果Session过期
if(response.status == 419){
var SessionService = $injector.get('SessionService');
var $http = $injector.get('$http');
var deferred = $q.defer();
//创建一个新的session
SessionService.login().then(deferred.resolve, deferred.reject);
return deferred.promise.then(function(){
reutrn $http(response.config);
return $q.reject(response);
return sessionR
以上就是本文的全部内容，希望对大家的学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具件商品，共计
Angularjs中controller的三种写法分享
日期： 阅读：5次 【 字体：
在Angular中，Directive、Service、Filter、Controller都是以工厂方法的方式给出，而工厂方法的参数名对应着该工厂方法依赖的Service。angularjs中controller其实就是一个方法，它有三种写法，下面来一起看看吧。
&pre name="code" class="javascript"&var AppController = ['$scope', function($scope){
$scope.notifyServiceOnChage = function(){
console.log($scope.windowHeight);
app.controller('AppController',AppController);
在定义AppController的时候，先声明方法需要注入的参数，然后再定义方法体。最后将AppController绑定到app上。
app.controller('AppController', function($scope){
$scope.notifyServiceOnChage = function(){
console.log($scope.windowHeight);
直接在app的controller属性定义，首先是controller名字，然后是方法体。
function AppController($scope) {
$scope.notifyServiceOnChage = function(){
console.log($scope.windowHeight);
直接写方法，然后在ng-controller引用该方法
以上就是关于angularjs中controller三种写法的全部内容，不知道大家都学会了没有，希望这篇文章的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
AngularJS 表达式详解及实例代码[12067]前面了解了AngularJS的基本用法，这里就跟着PDF一起学习下表达式的相关内容。
　　在AngularJS中的表达式，与js中并不完全相同。
　　首先它的表达式要放在{{}}才能使用，其次相对于javascript中的表达式概念，它有以下几点不同：
　　1 作用域不同
　　在javascript中默认的作用于是window，但是在angularJs中就不同了。它使用$scope控制作用于。
　　2 允许未定义的值
　　在angularjs中，如果使用了未定义的表达式，也不会出现错误，直接返回空值。
　　3 过滤器
　　可以在表达式中使用 | 管道命令符，添加过滤器，与UNIX的命令行类似。&
　　4 $符号
　　用以区别angular的方法与用户自定义的方法。
　　下面看一段小代码：
&!doctype html&
&html ng-app&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"&&/script&
&div ng-controller="ctl"&
name:&input ng-model="name" type="text"&
&button ng-click="reset()"&reset&/button&
hello ! {{test}}
filter : {{name | uppercase}}
&script type="text/javascript"&
function ctl($scope){
var str = "init";
$scope.name =
$scope.reset = function(){
$scope.name =
　　通过reset触发reset方法，重置name变量的内容；
　　在表达式中，引用了未定义的test，但是并没有报错，直接默认显示为空；―― {{test}}
　　最后使用过滤器，将表达式中name的值转化成大写。―― {{name | uppercase}}
　　运行结果：
&&&& 以上就是对AngularJS 表达式的资料整理，后续继续补充相关资料，谢谢大家的支持！AngularJs 动态加载模块和依赖[12057]最近项目比较忙额，白天要上班，晚上回来还需要做Angular知识点的ppt给同事，毕竟年底要辞职了，项目的后续开发还是需要有人接手的，所以就占用了晚上学习的时间。本来一直不打算写这些第三方插件的学习笔记，不过觉得按需加载模块并且成功使用这个确实是个好处，还是记录下来吧。基于本兽没怎么深入的使用requireJs，所以本兽不知道这个和requireJs有什么区别，也不能清晰的说明这到底算不算Angular的按需加载。
为了实现这篇学习笔记知识点的效果，我们需要用到：
angular:https://github.com/angular/angular.js
ui-router:https://github.com/angular-ui/ui-router
ocLazyLoad:https://github.com/ocombe/ocLazyLoad
废话不多说，进入正题...
首先我们看下文件结构：
Angular-ocLazyLoad
--- demo文件夹
--- 框架及插件文件夹
angular-1.4.7
--- angular 不解释
angular-ui-router
--- uirouter 不解释
oclazyload
--- ocLazyload 不解释
--- bootstrap 不解释
angular-tree-control-master
--- angular-tree-control-master 不解释
--- ng-table 不解释
angular-bootstrap
--- angular-bootstrap 不解释
--- js文件夹 针对demo写的js文件
controllers
--- 页面控制器文件夹
angular-tree-control.js
--- angular-tree-control控制器代码
default.js
--- default控制器代码
ng-table.js
--- ng-table控制器代码
app.config.js
--- 模块注册及配置代码
oclazyload.config.js
--- 加载模块配置代码
route.config.js
--- 路由配置及加载代码
--- html页面文件夹
angular-tree-control.html
--- angular-tree-control插件的效果页面
default.html
--- default页面
ng-table.html
--- ng-table插件效果页面
ui-bootstrap.html
--- uibootstrap插件效果页面
index.html
--- 主页面
注意：这个demo没做嵌套路由，只是简单实现单视图的路由以展示效果。
我们来看主页面的代码：
&!DOCTYPE html&
&html lang="en" xmlns="http://www.w3.org/1999/xhtml"&
&meta charset="utf-8" /&
&title&&/title&
&link rel="stylesheet" href="Scripts/bootstrap/dist/css/bootstrap.min.css" /&
&script src="Scripts/angular-1.4.7/angular.js"&&/script&
&script src="Scripts/angular-ui-router/release/angular-ui-router.min.js"&&/script&
&script src="Scripts/oclazyload/dist/ocLazyLoad.min.js"&&/script&
&script src="js/app.config.js"&&/script&
&script src="js/oclazyload.config.js"&&/script&
&script src="js/route.config.js"&&/script&
&div ng-app="templateApp"&
&a href="#/default"&主页&/a&
&a href="#/uibootstrap" &ui-bootstrap&/a&
&a href="#/ngtable"&ng-table&/a&
&a href="#/ngtree"&angular-tree-control&/a&
&div ui-view&&/div&
在这个页面，我们只加载了bootstrap的css、angular的js、ui-router的js、ocLazyLoad的js，以及3个配置的js文件。
再看看四个页面的html代码：
angular-tree-control效果页面
&treecontrol tree-model="ngtree.treeData" class="tree-classic ng-cloak" options="ngtree.treeOptions"&
{{node.title}}
&/treecontrol&
页面上有个使用该插件对应的指令。
default页面
&div class="ng-cloak"&
{{default.value}}
这里我们只是用来证明加载并正确执行default.js。
ng-table效果页面
&div class="ng-cloak"&
&div class="p-h-md p-v bg-white box-shadow pos-rlt"&
&h3 class="no-margin"&ng-table&/h3&
&button ng-click="ngtable.tableParams.sorting({})" class="btn btn-default pull-right"&Clear sorting&/button&
&strong&Sorting:&/strong& {{ngtable.tableParams.sorting()|json}}
&table ng-table="ngtable.tableParams" class="table table-bordered table-striped"&
&tr ng-repeat="user in $data"&
&td data-title="'Name'" sortable="'name'"&
{{user.name}}
&td data-title="'Age'" sortable="'age'"&
{{user.age}}
这里写了些简单的ng-table效果。
ui-bootstrap效果页面
&span uib-dropdown class="ng-cloak"&
&a href id="simple-dropdown" uib-dropdown-toggle&
下拉框触发
&ul class="uib-dropdown-menu dropdown-menu" aria-labelledby="simple-dropdown"&
下拉框内容.这里写个效果证明实现动态加载即可
这里仅写了个下拉框效果，证明正确加载并使用该插件。
好了，看完了html，我们看下加载配置和路由配置：
"use strict"
var tempApp = angular.module("templateApp",["ui.router","oc.lazyLoad"])
.config(["$provide","$compileProvider","$controllerProvider","$filterProvider",
function($provide,$compileProvider,$controllerProvider,$filterProvider){
tempApp.controller = $controllerProvider.
tempApp.directive = $compileProvider.
tempApp.filter = $filterProvider.
tempApp.factory = $provide.
tempApp.service =$provide.
tempApp.constant = $provide.
以上代码对模块的注册，仅仅依赖了ui.router和oc.LazyLoad。配置也只是简单配置了模块，以便在后面的js能识别到tempApp上的方法。
然后我们再看看ocLazyLoad加载模块的配置：
"use strict"
.constant("Modules_Config",[
name:"ngTable",
module:true,
"Scripts/ng-table/dist/ng-table.min.css",
"Scripts/ng-table/dist/ng-table.min.js"
name:"ui.bootstrap",
module:true,
"Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"
name:"treeControl",
module:true,
"Scripts/angular-tree-control-master/css/tree-control.css",
"Scripts/angular-tree-control-master/css/tree-control-attribute.css",
"Scripts/angular-tree-control-master/angular-tree-control.js"
.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);
function routeFn($ocLazyLoadProvider,Modules_Config){
$ocLazyLoadProvider.config({
debug:false,
events:false,
modules:Modules_Config
路由的配置：
"use strict"
tempApp.config(["$stateProvider","$urlRouterProvider",routeFn]);
function routeFn($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/default");
$stateProvider
.state("default",{
url:"/default",
templateUrl:"views/default.html",
controller:"defaultCtrl",
controllerAs:"default",
deps:["$ocLazyLoad",function($ocLazyLoad){
return $ocLazyLoad.load("js/controllers/default.js");
.state("uibootstrap",{
url:"/uibootstrap",
templateUrl:"views/ui-bootstrap.html",
deps:["$ocLazyLoad",function($ocLazyLoad){
return $ocLazyLoad.load("ui.bootstrap");
.state("ngtable",{
url:"/ngtable",
templateUrl:"views/ng-table.html",
controller:"ngTableCtrl",
controllerAs:"ngtable",
deps:["$ocLazyLoad",function($ocLazyLoad){
return $ocLazyLoad.load("ngTable").then(
function(){
return $ocLazyLoad.load("js/controllers/ng-table.js");
.state("ngtree",{
url:"/ngtree",
templateUrl:"views/angular-tree-control.html",
controller:"ngTreeCtrl",
controllerAs:"ngtree",
deps:["$ocLazyLoad",function($ocLazyLoad){
return $ocLazyLoad.load("treeControl").then(
function(){
return $ocLazyLoad.load("js/controllers/angular-tree-control.js");
ui-bootstrap的下拉框简单的实现不需要控制器，那么我们就只看看ng-table和angular-tree-control的控制器js吧：
ng-table.js
(function(){
"use strict"
.controller("ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]);
function ngTableCtrlFn($location,NgTableParams,$filter){
var data = [{ name: "Moroni", age: 50 },
{ name: "Tiancum ", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 }];
this.tableParams = new NgTableParams(
// 合并默认的配置和url参数
angular.extend({
count: 10,
// 每页的数据量
sorting: {
name: 'asc'
// 默认排序
$location.search())
total: data.length, // 数据总数
getData: function ($defer, params) {
$location.search(params.url()); // 将参数放到url上，实现刷新页面不会跳回第一页和默认配置
var orderedData = params.sorting ?
$filter('orderBy')(data, params.orderBy()) :
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
angular-tree-control.js
(function(){
"use strict"
.controller("ngTreeCtrl",ngTreeCtrlFn);
function ngTreeCtrlFn(){
this.treeData = [
title:"标签1",
childList:[
title:"子级1",
childList:[
id:"1-1-1",
title:"再子级1",
childList:[]
title:"子级2",
childList:[
id:"1-2-1",
title:"再子级2",
childList:[
id:"1-2-1-1",
title:"再再子级1",
childList:[]
title:"子级3",
childList:[]
title:"标签2",
childList:[
title:"子级1",
childList:[]
title:"子级2",
childList:[]
title:"子级3",
childList:[]
title:"标签3",
childList:[
title:"子级1",
childList:[]
title:"子级2",
childList:[]
title:"子级3",
childList:[]
this.treeOptions = {
nodeChildren:"childList",
dirSelectable:false
让我们忽略default.js吧，毕竟里面只有个"Hello Wrold"。
github url : https://github.com/Program-Monkey/Angular-ocLazyLoad-Demo
以上就是对AngularJS 动态加载模块和依赖的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！AngularJS中关于ng-class指令的几种实现方式详解[12021]前言
开发中经常会遇到这样的需求，一个元素需要在不同的状态下呈现不同的样子，而在这所谓的的样子当然就是改变其css的属性，而实现动态的改变属性值，我们就需要实现动态的更换其class属性值。
在这给大家介绍三种方法来实现，大家可以根据自己的需求来选择方式，下面来看看。
第一种：通过数据的双向绑定（不推荐）
&div ng-controller="firstController"&
&div ng-class="{{className}}"&&/div&
var app=angular.module("myModule",[])
app.controller('firstController',function($scope){
$scope.className='change';
网上各种不推荐，说实话，既然angularJS双向数据绑定这么吊，为什么不能通过这个来改变呢！查了下原由：“在controller涉及了classname在我看来是乎总是那么诡异，我希望的是controller是一个干净的纯javascript意义的object”，当然并没有明文固定不能够这么使用的，而且反而我觉得这样非常的方便，让html中元素想怎么变就怎么变！同理中的img元素中的src就不可以通过别的来改变，但是通过这种方式就是可以的！当然，这种方式也的确给人的感觉怪怪的，个人认为：可以不得已而为之~
第二种：通过对象数组
&div ng-controller="firstController"&
&div ng-class="{true:'change1',false:'change2'}[className]"&&/div&
var app=angular.module("myModule",[])
app.controller('firstController',function($scope){
$scope.className=
实现很简单，就是当className为true的时候class为change1，相反则为change2。
但是有一点不好的只能够让一个元素拥有两种状态，虽然这么说！基本也是满足所需了，我一般都用这个。简单、直观！
第三种：通过key/value
&div ng-controller="firstController"&
&div ng-class="{'change1':select,'change2':choice,'change3':lala}"&
var app=angular.module("myModule",[])
app.controller('firstController',function($scope){
$scope.select=
$scope.lala=
当lala为true的时候，class则为change3，个人认为这个是比较推荐的，可以弥补第二种方式的点点遗憾~
我们如果在项目中可以灵活的运用这些指令会给我们带来非常多的便利，我们在解决问题的时候能有更多的思路，这样我们可以组合的使用这些指令来快速的解决一些比较苦恼的问题！以上就是这篇文章的全部内容，希望能对大家想学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。
AngularJS中过滤器的使用与自定义实例代码[12019]前言
相信大家都知道过滤器的使用：一种是在html中的使用，一种是在js代码中的使用，下面我们来通过实例深入了解。
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&过滤器&/title&
&script src="day2/src/angular.js"&&/script&
&style type="text/css"&
&div ng-app="fristApp"&
&div ng-controller="fristController"&
&!--多个过滤器之间用 | 链接--&
&!--参数的实质就是把参数添加在数字前面（在货币符号处使用）--&
{{money | currency}}&br /&
{{money | currency:'￥'}}&br /&
{{str | uppercase}}&br /&
{{json | json}}&br /&
&!-- 会进行四舍五入--&
{{num | number:3}}&br /&
&!--时间 只有MM是大写--&
{{currenttime | date:'yyyy-MM-dd-hh'}}
&!--字符串的切割--&
{{strr | limitTo:3}}
{{strr | limitTo:-3}}
&!--按照person的age进行排序--&
&li ng-repeat="person in arr | orderBy:'age':false"&
{{person.name}}
&!--true 位于第二个位置，其中num是不能加“”的，上面的加“”是因为name是他的一个属性--&
&li ng-repeat="n in [2,43,432,453,65] | orderBy:num:true"&
&!--根据person的属性进行过滤--&
&input type="text" ng-model="name" /&
&li ng-repeat="person in arr | filter:{'name':name}"&
{{person.name}}
&script type="text/javascript"&
var myApp = angular.module('fristApp',[]);
myApp.controller('fristController',function($scope,$filter){
$scope.money = 100;
$scope.str = "fsHIOiiiiIU" ;
$scope.json = {name:"zhangsan",age:40};
$scope.num = ;
var time = new Date();
$scope.currenttime = time.getTime();
$scope.strr = "fujichao";
$scope.arr = [
{name:'zhangsan',age:33},
{name:'zhangsan2',age:30},
{name:'zhangsan3',age:44},
{name:'zhangsan4',age:3}
// 如果数组的元素相等的话，这两个元素的内存地址是相同的。
var arrnum = [12,12,33,44];
if(arrnum[0]===arrnum[1]){
console.log("fji")
/* 在JS中使用过滤器*/
// $filter(过滤器的名字)(对象，条件)
var val = $filter('currency')($scope.money,'￥');
console.log(val);
var string1 = "fssdHIUHIjiojjOIJIOJ"
var valStr = $filter('uppercase')(string1);
console.log(valStr)
运行效果图如下
以上就是这篇文章的全部内容，希望对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。AngularJS使用自定义指令替代ng-repeat的方法[12017]前言
大家都知道对于处理小数量，ng-repeat是非常有用的，但是如果需要处理非常大的数量集，还是采用自定义的方法更好一些。特别是数据大多都是静态的或已预存储好的，这个时候应避免使用ng-repeat指令。
ng-repeat中的表达式和 $watch
Angular中的表达式都会创建$watch 的Scope 函数。用于监听模型变化，当你的模型部分发生变化时它会通知你。在ng-repeat指令中，如果某行数据有15列数据都绑定了表达式，如果数据有1000多行的话，那么$watch就又奖金15000个，这性能简直难以想象。
所以当我们想要实现ng-repeat的功能又想兼备性能，那只能另找一种方法了。
替换ng-repeat的方法
如果内容是静态的，我们不需要两种方式的绑定，只需要执行一次赋值语句{{::value}}就可以。如果anguluarJS是1.3以下的旧版本，是不支持的一次性绑定语法的。那么最好的方法就是自定义指令，换言之，静态数据可以使用一些简单的方法来格式化。
1、首先创建无序列表，用于保存动态绑定的内容。
创建UL标签作为容器用于显示列表
我们选择动态加载List中的数据，首先添加div标签，并命名为"repeater-alternative"用于渲染流中。
&div repeater-alternative&&/div&
2、定义List 数据：
//示例数据
var studentsList =
FirstName: "Raj,
LastName : "B",
Country : "India",
BirthDate: "01/01/1990"
FirstName: "Kumar,
LastName : "S",
Country : "India",
BirthDate: "01/01/1990"
..................
..................
..................
..................
$scope.collectionObject = studentsL //分配给$scope函数
3、实际List内容
主要目的适用于重复集合对象，并显示到列表中，所以需要制定访问循环的逻辑，并按照需求来格式化字符串。
var tableRow = "";
angular.forEach($scope.collectionObject, function (item) {
tableRow = tableRow + ['&li&',
'&div class="col-md-1"&' + item.FirstName + '&/div& ',
'&div class="col-md-1 "&' + item.LastName + '&/div& ',
'&div class="col-md-1 "&' + item.Country+ '&/div& ',
'&div class="col-md-1 "&' + item.Id + '&/div& ',
'&div class="col-md-1 "&' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '&/div& ',
'&/li&'].join('');
4、List格式化逻辑
一旦collectionObject的值已被赋给其他变量，就需要定义显示数据的表格。
5、如何获取分配CollectionObject的时间
Angular会监控$scope变量值得改变，一旦值被修改，则$watch将被处罚，所以需要将CollectionObject赋值逻辑放到$scope变量的$watch中。
代码如下：
$scope.$watch($scope.object, function (oldValue, newValue) {
即，当我们执行赋值语句是，Angular会处理这个事件，并格式化List的内容。
$scope.$watch('collectionObject', function (oldValue, newValue) {
var tableRow = "";
angular.forEach($scope.collectionObject, function (item) {
tableRow = tableRow + ['&li&',
'&div class="col-md-1"&' + item.FirstName + '&/div& ',
'&div class="col-md-1 "&' + item.LastName + '&/div& ',
'&div class="col-md-1 "&' + item.State + '&/div& ',
'&div class="col-md-1 "&' + item.Id + '&/div& ',
'&div class="col-md-1 "&' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '&/div& ',
'&/li&'].join('');
接下来就是将内容渲染到表格控件中，也就是HTML&DIV&repeater-alternative标签中。
首先必须理解Angular的Directive机制，简单而言，就是我们来指示Angular,当指定的变量被发现，就开始执行后台操作。
var userDirectives = angular.module([]);
userDirectives.directive('DOMElementFound', function () {
replace: true,
link: function ($scope, $elem, attrs) {
//后台处理操作
我们会通知Angular，当发现"repeater-alternative" 元素，则将以下数据渲染到列表行中。
代码如下：
var userDirectives = angular.module([]);
userDirectives.directive('repeaterAlternative', function () {
replace : true,
link: function ($scope, $elem, attrs) {
$scope.$watch('collectionObject', function (oldValue, newValue) {
var tableRow = "";
angular.forEach($scope.collectionObject, function (item) {
tableRow = tableRow + ['&li&',
'&div class="col-md-1"&' + item.FirstName + '&/div& ',
'&div class="col-md-1 "&' + item.LastName + '&/div& ',
'&div class="col-md-1 "&' + item.State + '&/div& ',
'&div class="col-md-1 "&' + item.Id + '&/div& ',
'&div class="col-md-1 "&' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '&/div& ',
'&/li&'].join('');
//If IE is your primary browser, innerHTML is recommended to increase the performance
$elem.context.innerHTML = tableR
//If IE is not your primary browser, just appending the content to the element is enough .
//$elem.append(tableRow);
在本文中，主要模拟了ng-repeat的工作方式和逻辑，但只限于静态内容，所以输出结果与调用ng-repeat结果相同，但是渲染更快，因为该方法只有一种数据绑定方式和少量的$watch。以上就是这篇文章的全部内容，希望本文的内容能对大家的学习或者工作有所帮助，如果有疑问大家可以留言交流。
24小时客服热线}