javascript - ejemplos - angularjs tutorial

Cómo llamar a un filtro de otro filtro en angular.js

Question

Tengo un filtro, linkifyStuff, en el que quiero que se procesen algunas variables usando otro filtro. No puedo entender la sintaxis para llamar a un filtro de otro.

Sé sobre el encadenamiento de filtros; eso no es lo que quiero hacer. Quiero aplicar un filtro a una variable local en el filtro linkifyStuff, no a su entrada o salida.

Esperaría algo así como lo siguiente para trabajar, pero $ filter (''filtername'') no es la sintaxis correcta aparentemente.

module.filter(''sanitizeStuff'', function() {
// ...
})
module.filter(''prettifyStuff'', function() {
// ...
})
module.filter(''linkifyStuff'', function($filter) {
return function(text) {
// ...
// ...
return $filter(''sanitizeStuff'')(foo) + '' whatever '' + $filter(''prettifyStuff'')(bar)
}
})

Podría escribir funciones js simples para sanitizeStuff y sanitizeStuff y llamar a esa función desde estos filtros, pero esto parece incorrecto. ¿Algún consejo sobre cómo hacerlo de forma angular?

Gracias.

Answer 1

Última forma de ejemplo:

angular.module(''myApp.shared.shared-filters'', [])
.filter(''capitalize'', [''$filter'', function($filter) {
return function(input) {
return $filter(''uppercase'')(input.charAt(0)) + $filter(''lowercase'')(input.substr(1));
}
}]);

Answer 2

@useless preguntó si había "alguna forma de hacer esto para los filtros predeterminados".

Una forma redonda de usar filtros predeterminados: canalizarlo a través del filtro estándar antes de pasarlo a su filtro personalizado y pasar el valor original como parámetro.

Por ejemplo, su expresión angular se vería así:

{{myDate | date: ''mediumDate'' | relativeDate: myDate}}

Y tu filtro:

var myApp = angular.module(''myApp'',[]);
myApp
.filter(''relativeDate'', function() {
return function(formattedDate, dateStr) {
var returnVal = formattedDate,
today = new Date(),
evalDate = new Date(dateStr);
if (today.getFullYear() == evalDate.getFullYear() &&
today.getMonth() == evalDate.getMonth() &&
today.getDate() == evalDate.getDate()) {
returnVal = ''Today''
}
return returnVal
}
})
.controller(''myAppCtrl'', [''$scope'', function myAppCntrl($scope) {
$scope.myDate = "2001-01-01T01:01:01";
});

Answer 3

Inyecte sus filtros en linkifyStuff usando la sintaxis del <filterName>Filter . Me gusta esto:

app.filter(''linkifyStuff'', function(sanitizeStuffFilter,prettifyStuffFilter) {
return function(text) {
return sanitizeStuffFilter(text) + '' whatever '' + prettifyStuffFilter(text);
}
});

DEMO

Answer 4

Me encontré con algo así antes cuando filtré entradas de comentarios. Tenía 4 filtros diferentes, cuando el usuario hizo clic en enviar, se ejecutaría una función que ejecutaría los 4 filtros en la copia del comentario. Lancé mis filtros allí por si acaso. ADVERTENCIA: asegúrese de inyectar $ filter en su controlador, odio cuando me olvidé de inyectar cosas. Aquí está el código:

INYECCIÓN:

.controller(''Controller'', function ($scope, $filter){
//CODE GOES HERE
});

HTML:

<ul ng-repeat="comment in comments">
<li>{{comment.user_name}}</li>
<li dynamic="deliberatelyTrustDangerousSnippet(comment.comment_copy)"></li>
</ul>

CONTROLADOR:

$scope.deliberatelyTrustDangerousSnippet = function(comment) {
comment = $filter(''breaks'')(comment);
comment = $filter(''links'')(comment);
comment = $filter(''images'')(comment);
comment = $filter(''youtubeLinks'')(comment);
return comment;
};

FILTROS:

.filter(''breaks'', function () {
return function (text) {
if (text !== undefined) return text.replace(/&#10;/g, ''<br />'');
};
})
.filter(''links'', function () {
return function (text) {
if (text !== undefined){
return text.replace(/(?:http:////)?(?:www/.)?((?:[/w-/.]*)(?:/.(?:com|net|org|co|be))(?:(?:[//?/w?=?&?(?:&amp;)?/.?-]*)))/g, ''<a target="_blank" href="http://$1">$1</a>'');
}
};
})
.filter(''images'', function () {
return function (text) {
if (text !== undefined){
return text.replace(/(?:<.*=")(.*(?:(?:/.(?:jpg|JPG|png|PNG|gif|GIF|jpeg|JPEG))))(?:")(?:.*(?:<//a>))/g, ''<img src="$1"/>'');
}
};
})
.filter(''youtubeLinks'', function () {
return function (text) {
if (text !== undefined){
return text.replace(/(?:<.*=")(?:(?:(?:(?:http:////)|(?:www/.)|(?:http:////www/.))(?:(?:youtube/.com.*v=)|(?:youtu/.be//))((?:/w|/d|-)*)(?:(?:&amp;feature=related)?)))(?:")(?:.*(?:<//a>))/g, ''<youtube id="$1"></youtube>'');
}
};
})

Answer 5

app.filter(''linkifyStuff'', function(sanitizeStuffFilter,prettifyStuffFilter) {
return function(text) {
return sanitizeStuffFilter(text) + '' whatever '' + prettifyStuffFilter(text);
}
});

esto no funcionó para mí. si alguien tiene un problema con el código anterior. puedes probar esto lo cual funcionó bastante bien para mí.

app.filter(''linkifyStuff'', function($filter) {
return function(text) {
return $filter(''sanitizeStuffFilter'')(text) + '' whatever '' + $filter(''prettifyStuffFilter'')(text);
}
});