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);
        }
    });