Wie innen JavaScript verwenden {{}} AngularJS

Question

Ich weiß, dass {{}} einen Ausdruck interpretieren kann, aber wenn ich versuche, in es zu benutzen JavaScript aktivieren, funktioniert es nicht wie {{"a/b/c/d/".split('/').filter(function(n){return n}).reverse()[0]}}

ich diese verwenden müssen Erhalte den Slug-Wert von der URL.

Bitte schlagen Sie vor, wie dies mit angularjs zu erreichen ist, die Quelle der URL stammt von externem Feed, daher habe ich eine sehr begrenzte Kontrolle darüber.

Answer 1

Vollständige JS wird nicht unterstützt, und selbst es wäre, wäre es eine schlechte Praxis.

Ich empfehle Ihnen, dies zumindest auf eine Scope-Funktion in Ihrem Controller zu setzen.
Noch besser wäre es in einem Betrieb zu nehmen oder in einem Filter, so dass, wenn Sie wollen, dass es für andere Zwecke können Sie später wieder zu verwenden:

$scope.getSlug = function(str) { 
    return str.split("/").filter(function(n) { 
    return n; 
    }).reverse()[ 0 ]; 
}; 

Und dann in der Vorlage:

{{ getSlug("a/b/c/d/") }} 
{{ getSlug(myModelProperty) }} 

Es ist auch gültig, die Angular docs about expressions zu lesen.

Answer 2

{{}} sagen Angular, dass aus Ihrer Sicht Sie einen Ausdruck zu interpolieren haben. Winkelausdrücke unterstützen nicht das gesamte JavaScript. Zur Dokumentation check here.

Wenn Sie alle JavaScript benötigen. Es ist besser, die Logik in eine Controllerfunktion zu integrieren.

Auszug aus docs:

Es könnte verlockend sein, von Angular Ansicht Ausdrücke wie JavaScript-Ausdrücken zu denken, aber das ist nicht ganz richtig, da Angular keinen JavaScript eval() verwenden, um Ausdrücke zu bewerten . Sie können denken Angular Ausdrücke wie JavaScript Ausdrücke mit folgenden Unterschieden:

Bewertung Attribut: Bewertung aller Objekte sind gegen die Umfang der Bewertung zu tun, anders als in JavaScript, wo die Ausdrücke gegen das globale Fenster ausgewertet werden .

Versöhnlich: Ausdrucksauswertung ist nachsichtig zu undefinierten und null, anders als in JavaScript, wo versucht nicht definierte Eigenschaften bewerten können oder Referencetypeerror erzeugen.

Keine Kontrollfluss-Anweisungen: Sie können keine der folgenden in Winkelausdruck: Conditionals, Schleifen oder werfen.

Answer 3

Sie sollten Templating nicht verwenden - Angular unterstützt das nicht.Entweder eine Funktion im Bereich erstellen:

$scope.getSlug = function (input) { 
    return input.split('/').filter(function(n){return n}).reverse()[0]; 
} 

Oder einen Filter erstellen, das tut, was Sie wollen acheive:

angular.module('myModule').filter('myFilter', function() { 

    return function (input) { 
     if (!input) return input; 

     return input.split('/').filter(function(n){return n}).reverse()[0]; 
    }; 
}); 

und verwenden Sie es wie folgt aus:

<div>{{"a/b/c/d" | myFilter}}</div>