Angular Directive to point to item in view

[Michael J. Mahony]

Hi everyone, I have a simple directive that binds the datepicker object. I have a working JSFiddle: http://jsfiddle.net/mikemahony/jdz0vvkv/ but when I use this same code inside my application nothing happens--no datepicker and no errors. Now, I suspect this has to do with scoping because I know ng-view creates a child scope. Right now I have this as my directive:

JBenchApp.directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'DD, d  MM, yy',
                onSelect: function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });
        }
    };
});

and this is in my view (partial):

<input type="text" ng-model="date" jdatepicker />

I suspect that this has to do with the scope. How can I insure that this works with the object in the partial?

[Alain Chautard]

What error are you getting from the browser console? That's where the explanation will be found.

[Michael J. Mahony]

That's the point...there is no error showing in the console.

[Michael J. Mahony]

[Alain Chautard]

There's a typo in your view code:; You declared an attribute called jdatepicker instead of jqdatepicker per you directive declaration.

Alain Chautard

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/6fRdWlYLyKA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Hi Michael,

I noticed the $scope.$apply in your directive. It does what you think, but it also refreshes every binding in your page, which may be very costly. As you have an ngModel, you don’t need it at all. I updated your fiddle a bit to show you how to use ngModelController.$setViewValue(). This is much better, as it updates only the value at hand, and will not trigger a full $digest.

Hope this helps you a bit,
Regards
Sander

​

[Michael J. Mahony]

Thanks Alain for finding the typo! Thanks Sander for the tip on ngModelController.$setViewValue(). I've implemented both changes. Onward my lessons in Angular.js go!

Michael J. Mahony

Personal Trainer

ISSA Certified

http://fastfitnessonline.com

--