using javascript inline in angularjs

Question

I have an array in my controller containing date-objects called $scope.events. I would like to iterate these events and and print them out in a certain format, which I use momentjs for.

Now the thing is, I cannot get it to actually use momentjs.

I have tried the following:

<table>
   <tr ng-repeat="ev in events">
    <td>{{ moment(ev).format("HH") }}</td>
   </tr>
</table>

but this just prints an empty cell.

So my question is, how do I use javascript, momentjs, inline in my angular-binding ?

thanks

Thomas

Answer 1

Assuming moment is a property of window, you'll need to create a reference in this object's $scope that references moment.

Very simply:

$scope.moment = window.moment;

Here's a plunkr showing internal $scope methods vs. a $scope property referencing a method on window:

http://embed.plnkr.co/PWFK80/preview

That's the simple answer, but you'd likely want to wrap this library into its own directive or service, so that you could use it without coupling higher-level objects to the window object unnecessarily.

Answer 2

Wrap the code in a function in your controller for a quick answer.

controller('Ctrl', function($scope) {
  $scope.moment = moment;
});

I edited this to match a comment by @Stewie because it looks better

and in your html:

<td>{{moment(ev, 'HH'}}</td>

Or make a service/directive for moment for something better.