Using a jQuery Plugin in an AngularJS View

Question

I am working on my first AngularJS project. I love it so far, but I'm hung up now.

My project is structured so that I've got a single ng-view in my index.html that is populated with a separate HTML template/partial based on the current route.

In one of the partials I'd like to use the jQuery DateFormat plugin to format a SQLite datetime string that is parsed into the template/partial using an angular expression:

{{ find.addDate }}

I've included the plugin with a script tag in index.html and I thought from there it would be as simple as doing something like this in my template/partial:

{{ $.format.date(find.addDate, "dd/MM/yyyy") }}

Or maybe:

{{ angular.element.format.date(find.addDate, "dd/MM/yyyy") }}

That's not working (I'm sure it's obvious why to some of you), but there's no error in the console and I'm pretty stumped on how to approach it. I've done some Googling with terms like 'third party scripts in angular' or 'jquery plugin angularjs', etc. but can't find recent code examples on how to accomplish this the right way.

I did find some older code using angular.widget, but it appears that's been deprecated in the 1.0+ releases. I think I need to use a directive, but I can't figure it out exactly.

I'm really hoping for an explanation or simple example please. Thanks a lot!

Answer 1

The problem is when you do {{expression}} in a template, it evaluates it on the current scope.

For example, if you have this controller:

function MyCtrl($scope) {
    $scope.find = {
        addDate: 2030
    };
}

{{find.addDate}} would in reality look for $scope.find.addDate and evaluate it (in this case returning 2030).

So when you try to do {{ $.format.date(find.addDate, "dd/MM/yyyy") }}, angular looks for $scope.$.format.date(find.addDate, "dd/MM/yyyy"), which doesn't exist.

Try something like this instead, using a function in your controller:

   function MyCtrl($scope) {
        $scope.find = {
            addDate: 2030
        };
        $scope.formatDate = function(input, format) {
            return $.format.date(input, format);
        }
    }

And then you can do in your html you can do: {{formatDate(find.addDate, "dd/MM/yyyy")}}.

You could also evaluate it as a filter in your markup, since it just takes an input and changes it: {{find.addDate | formatDate:"dd/MM/yyyy"}}