I know that {{}} can interpret a expression but when I try to use javascript in it, it does not work like {{"a/b/c/d/".split('/').filter(function(n){return n}).reverse()[0]}}

I need to use this to get slug value from url.

Please suggest how to achieve this with angularjs, the source of the url is from external feed, hence I have very limited control on this.

I know that {{}} can interpret a expression but when I try to use javascript in it, it does not work like {{"a/b/c/d/".split('/').filter(function(n){return n}).reverse()[0]}}

I need to use this to get slug value from url.

Please suggest how to achieve this with angularjs, the source of the url is from external feed, hence I have very limited control on this.

• javascript
• angularjs

• 1 nice question...same what i required. – HD.. Commented Dec 19, 2013 at 10:38
• 2 You better embed it in model's function, like getSlug() and use it like {{ item.getSlug() }}. This is more consistent way – oxfn Commented Dec 19, 2013 at 10:39
• 2 You can't and you shouldn't. See Angular Expressions vs. JS Expressions, or at least you can't expect any arbitrary javascript to just work. ... If, on the other hand, you do want to run arbitrary JavaScript code, you should make it a controller method and call the method. If you want to eval() an angular expression from JavaScript, use the $eval() method. – Yoshi Commented Dec 19, 2013 at 10:39
• 2 Not really related to the question, but if you're trying to extract the last segment of your url you can just use url.split('/').pop() or url.substr(url.lastIndexOf('/') + 1). – Paolo Moretti Commented Dec 19, 2013 at 11:54

3 Answers 3

Full JS is not supported, and even it were, it would be a bad practice.

I recommend you to put this at least on a scope function in your controller.
Even better would be to put it in a service or in a filter, so if you want to reuse it later for other purposes you can:

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

And then, in your template:

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

Also, it's valid to read the Angular docs about expressions.

You shouldn't be using templating like that - so Angular doesn't support it. Either create a function in the scope:

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

Or create a filter that does what you want to acheive:

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

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

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

And use it like this:

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

{{}} tell Angular that in your view, you have an Expression to interpolate. Angular expressions do not support all of JavaScript. For documentation check here.

If you need all of JavaScript. It is better to wrap the logic in a controller function.

Excerpt from docs:

It might be tempting to think of Angular view expressions as JavaScript expressions, but that is not entirely correct, since Angular does not use a JavaScript eval() to evaluate expressions. You can think of Angular expressions as JavaScript expressions with following differences:

Attribute Evaluation: evaluation of all properties are against the scope doing the evaluation, unlike in JavaScript where the expressions are evaluated against the global window.

Forgiving: expression evaluation is forgiving to undefined and null, unlike in JavaScript, where trying to evaluate undefined properties can generate ReferenceError or TypeError.

No Control Flow Statements: you cannot do any of the following in angular expression: conditionals, loops, or throw.