CODEWITHSUNDEEP
javascriptangularjs
Kiran Shinde
Kiran Shinde

Reputation: 5982

Two way binding in directive and controller

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;
   }
})

Upvotes: 0

Views: 536

Answers (3)

Kursad Gulseven
Kursad Gulseven

Reputation: 2008

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.

Upvotes: 0

Vikash Kumar
Vikash Kumar

Reputation: 1718

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(){
  }

Upvotes: 1

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

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

Upvotes: 1

Related Questions