AngularJS , passing object by reference in directive

Question

I want to build a customize checkbox by write a directive.

App.directive('preferredCheckBox', function() {
return {
restrict: 'E',
require: '?ngModel',
scope: {
    ngModel: '='
},
link: function(scope, elem,attrs){
    elem.bind('click', function() {
        scope.ngModel = !scope.ngModel;

        //alert("clicked");
    })
},

template: "<div ng-if='ngModel'> <span class='ion-ios-star text-red' style='font-size:2em'></span></div> " +
          "<div ng-if='!ngModel'> <span class='ion-ios-star-outline text-red' style='font-size:2em'></span></div>"
 }

});

This is how I call the directive

<preferred-check-box ng-model="item.isChecked"></preferred-check-box>

The directive work fine for display purpose. But if I click on the checkbox, it doesn't change the value of "item.isChecked"

In my opinion, inside the directive :

 scope: {
        ngModel: '='
 },
link: function(scope, elem,attrs){
    elem.bind('click', function() {
        scope.ngModel = !scope.ngModel;

        //alert("clicked");
    })
},

It just clone another "item.isChecked" value into its own local scope, during trigger the click function, it doesn't change the original "item.isChecked".

How can I handle this ? I want to pass ng-model by reference.

Here is the link : http://jsfiddle.net/tanch/rd0b1n4b/7/ When I click the text "checked", it should change to "unchecked", vice versa.

when click on the text, it should change "checked" to "unchecked", vice versa — Anson Tan
– Anson Tan, Commented Dec 3, 2015 at 10:18

Keval Bhatt · Accepted Answer · 2015-12-03 12:18:56Z

1

see working example: http://jsfiddle.net/kevalbhatt18/rd0b1n4b/11/

link: function(scope, elem,attrs,ngModel){ elem.bind('click', function() { ngModel.$setViewValue(!scope.ngModel); ngModel.$render(); alert("clicked"); }) }

answered Dec 3, 2015 at 12:18

Keval Bhatt

6,3623 gold badges26 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mbaitoff · Accepted Answer · 2015-12-04 05:51:12Z

0

just add scope.$apply(); in your link function, just before the alert, to start the digest loop.

edited Dec 4, 2015 at 5:51

mbaitoff

9,1914 gold badges26 silver badges32 bronze badges

answered Dec 3, 2015 at 12:00

Guenter Guckelsberger

9408 silver badges6 bronze badges

Collectives™ on Stack Overflow

AngularJS , passing object by reference in directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related