How to apply a function to an angularjs expression inside a controller?

Question

simple question, I would like to apply a function inside my controller scope to an expression.

This is my HTML inside my controller

<p><span ng-if="paginaDetail.pubdate !== '' ">Vanaf {{paginaDetail.pubdate}}</span></p>

This is my javascript

$scope.formatMysqlTimestampToHumanreadableDateTime = function(sDateTime){
    sDateTime = sDateTime.toString();
    var sHumanreadableDateTime = sDateTime.substring(8, 10) + "/" + sDateTime.substring(5, 7) + "/" + sDateTime.substring(0, 4);
    sHumanreadableDateTime += " " + sDateTime.substring(11, 13) + ":" + sDateTime.substring(14, 16);
    return sHumanreadableDateTime;
};

and what I was trying to do is to apply formatMysqlTimestampToHumanreadableDateTime to paginaDetail.pubdate like this

<p><span ng-if="paginaDetail.pubdate !== '' ">Vanaf {{formatMysqlTimestampToHumanreadableDateTime(paginaDetail.pubdate)}}</span></p>

or this

<p><span ng-if="paginaDetail.pubdate !== '' ">Vanaf {{paginaDetail.pubdate|formatMysqlTimestampToHumanreadableDateTime}}</span></p>

but both ways are not correct.

The first method works but on the console i've this error

Error: [$interpolate:interr] http://errors.angularjs.org/1.2.16/$interpolate/interr?p0=Tot%20%7B%7BformatMysqlTimestampToHumanreadableDateTime(paginaDetail.endpubdate)%7D%7D&p1=TypeError%3A%20sDateTime%20is%20undefined t/<@http://mysite.local/js/libs/angular.min.js:6:443 g/r@http://mysite.local/js/libs/angular.min.js:78:354 Yd/this.$gethttp://mysite.local/js/libs/angular.min.js:106:161 Yd/this.$gethttp://mysite.local/js/libs/angular.min.js:109:285 f@http://mysite.local/js/libs/angular.min.js:71:234 F@http://mysite.local/js/libs/angular.min.js:75:408 ve/http://mysite.local/js/libs/angular.min.js:76:457

http://mysite.local/js/libs/angular.min.js Line 89

and the second one simply doesn't work.

Do you have any suggestions? Thanks a lot.

Solution 1

If I can offer an alternative option to controller based actions... this looks like a great scenario for a filter

The idea is to use filter the input while it's being put into the html like {{myDate|format}}.

The filter is defined like:

myApp.filter('format', function () {
   return function (input) {
      //your date parser here
   };
});

Or whatever else you wish to do with it. This way you can reuse it without having to put the function in every controller you wish to use it in.

Here's a fiddle you can expand on, to get you going.

edit Looking more closely at the error I think your actual problem is that .pubdate is not populated (TypeError: sDateTime is not defined). Try to put a breakpoint in the function or see what console says.

Solution 2

This question already has the correct answer, but this may help to understand it better. For the question "How to run/apply a function inside an Angular expression", I can introduce this way,

Assign your function to $scope.something and run that. Example:

JavaScript inside your controller:

$scope.printMe= function(text){
   return text;
}

HTML (expression):

<p>{{printMe("Hello!")}}</p>

You will get Hello! inside your <p> tag

Solution 3

Actually your example {{func(param)}} works fine: http://jsfiddle.net/HB7LU/4418/. Problem is in something else. Try to make a fiddle illustrating your problem.