Using Globalize methods within ng-bind

Question

I want to use the the jquery-globalize format function within a ng-bind to format a date value in a $scope field according to the current culture. Something like this:

<div>{{Globalize.format(test.testDate, Globalize.culture().calendar.patterns.d)}}</div>

But it doesn't seem to work.

How do I accomplish this the easiest way?

Thank you

Answer 1

Your question mentions ng-bind but I don't see any use of it in your code. In any event, you can always use a controller to bind a variable to you views.

For example:

function HomeController() {
    var vm = this;
    // Any other variables here...
    vm.formattedDate = Globalize.format(test.testDate, Globalize.culture().calendar.patterns.d);
}

Then in your html you could do something like:

<div ng-controller="HomeController as homeCtrl">
    <p>{{ homeCtrl.formattedDate }}</p>
</div>

Or if you are using something like ui-router, you could do:

$stateProvider
    .state('home', {
        url: '/home',
        controller: 'HomeController as homeCtrl',
        template: '<p>{{ homeCtrl.formattedDate }}</p>' // Or use templateUrl.
    });

---

Note: If you are using $scope instead of the this method, it's basically the same process except you'll just trade the vm. syntax with $scope. and you can change HomeController as homeCtrl to just HomeController.