Two way binding in directive and controller

Question

I am newbie in angular

I have a directive and a controller. Look in the example What I want is change the checkbox value (true/false) on clicking the text as well as on clicking the outer div the text is in the controller.

Example : https://jsfiddle.net/pdhm98s3/

HTML

<div ng-app="miniapp">
   <div ng-controller="myController">
       <add-checkbox></add-checkbox>
       <div ng-click="changeCheckbox()">
         Change Check Value
       </div>

   </div>
 </div>

JS

var app = angular.module('miniapp', []);

app.directive("addCheckbox", function() {
  return {
        "restrict": "E",
        "replace": true,
        "scope": true,
        "template": '<div><div class="checkContainer"><input type="checkbox" ng-model="checkboxChecked"></div><div>{{!!checkboxChecked}}</div></div>',
        "link": function($scope, $elem, attrs) {
               $elem.bind("click", function() {
                     $scope.checkboxChecked = !$scope.checkboxChecked;
           })
       } 
   }
})

app.controller("myController", function($scope) {
   $scope.changeCheckbox = function() {
     $scope.checkboxChecked = !$scope.checkboxChecked;
   }
})

Saurabh Agrawal · Accepted Answer · 2017-02-06 12:44:46Z

1

This is because your checkbox is in directive template and your $scope.changeCheckbox() function is in controller. To change its value you will have to change directive's variable $scope.checkboxChecked, To do this you can use $rootScope.$broadcast();

Try this code

var app = angular.module('miniapp', []);

app.directive("addCheckbox", function() {
      return {
            "restrict": "E",
            "replace": true,
            "scope": true,
            "template": '<div><div class="checkContainer"><input type="checkbox" ng-model="checkboxChecked"></div><div>{{!!checkboxChecked}}</div></div>',
            "link": function($scope, $elem, attrs) {
                   $elem.bind("click", function() {
                         $scope.checkboxChecked = !$scope.checkboxChecked;
                   })

                   $scope.$on("changeCheckbox", function(event, args) {
                       $scope.checkboxChecked = !$scope.checkboxChecked;
                   })
            } 
      }
})

app.controller("myController", function($scope, $rootScope) {
    $scope.changeCheckbox = function() {
        $scope.checkboxChecked = !$scope.checkboxChecked;
        $rootScope.$broadcast('changeCheckbox', {});

    }
})

Here is your updated fiddle Fiddle Demo

answered Feb 6, 2017 at 12:44

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

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

3 Comments

Kiran Shinde Over a year ago

One more thing. On changing checkbox, I want to call controllers function, how can I do this?

Saurabh Agrawal Over a year ago

use $scope.$parent.changeCheckbox ();

Kursad Gulseven Over a year ago

It's bad practise to use $broadcast unless you really have no other choices; because it adds extra watchers to AngularJs runtime.

Vikash Kumar · Accepted Answer · 2017-02-06 13:00:01Z

1

create an object in controller and bind it with directive and it will work

<script>var app = angular.module('miniapp', []);
var app = angular.module('miniapp', []);

app.directive("addCheckbox", function() {
  return {
        "restrict": "E",
        "replace": true,
        "scope": true,
        "template": '<div><div class="checkContainer"><input type="checkbox" ng-model="checkboxChecked.check"></div><div>{{!!checkboxChecked.check}}</div></div>',
        "link": function($scope, $elem, attrs) {
               $elem.bind("click", function() {
                     $scope.checkboxChecked.check = ! $scope.checkboxChecked.check;
           })
    } 
}
})

app.controller("myController", function($scope) {
$scope.checkboxChecked={};
$scope.checkboxChecked.check=false;
$scope.changeCheckbox = function() {
    $scope.checkboxChecked.check = !$scope.checkboxChecked.check;
}
})

 <div ng-app="miniapp">
<div ng-controller="myController">
<add-checkbox></add-checkbox>
<div ng-click="changeCheckbox()">
      Change Check Value
</div>

 $scope.checkboxChecked.controllerFunction(){
  }

edited Feb 6, 2017 at 13:00

answered Feb 6, 2017 at 12:49

Vikash Kumar

1,7161 gold badge12 silver badges17 bronze badges

2 Comments

Kiran Shinde Over a year ago

One more thing. On changing checkbox, I want to call controllers function, how can I do this?

Vikash Kumar Over a year ago

attach that function to that object

Kursad Gulseven · Accepted Answer · 2017-02-06 13:06:05Z

0

You need to use directive scope binding properly.

HTML:

<add-checkbox checkbox-value="checkboxChecked"></add-checkbox>

Directive:

app.directive("addCheckbox", function() {
      return {
            "restrict": "E",
            "replace": true,
            "scope": {
            "value": "=checkboxValue"
        },
            "template": '<div><div class="checkContainer"><input type="checkbox" ng-model="value"></div>{{!!value}}</div>'
    }
})

Examine updated fiddle.

What is wrong with your code? You bind click to all directive by using $elem.bind("click". This is wrong because ng-model will bind checkbox value to your scope variable. You don't need to bind any event to set any variable.

answered Feb 6, 2017 at 13:06

Kursad Gulseven

2,0081 gold badge27 silver badges28 bronze badges

Collectives™ on Stack Overflow

Two way binding in directive and controller

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related