CODEWITHSUNDEEP
javascripthtmlangularjs
FlyingCat
FlyingCat

Reputation: 14250

How to get the value from a directive in my case

I am trying to create a directive for my app in Angular and need to pass value to my controller

I have something like

controllers.directive('checkBox', function() {
    return {
        restrict: 'E',
        scope: {
            checkAll: '=',
        },
        template: '<input check-all="checkAll" type="checkbox" ng-model="check"/>',
        replace: true,
        link: function(scope) {
            scope.$watch('checkAll', function(newVal){
                scope.check = newVal;
            })
        }
    }
})

app.controller('test', function(){
    $scope.submit=function(){
    //not sure how to get the checkbox value as $scope.check is undefined....        
    }
})

html

<div ng-controller="test">
 <div class="checkbox" ng-repeat="item in items">
      <check-box></check-box>{{item.name}}
 </div>
  <button type="button" ng-click="submit()">submit</button
</div>

Upvotes: 0

Views: 66

Answers (1)

vaidik
vaidik

Reputation: 2213

You are using two way binding using = for checkAll.

scope: {
    checkAll: '=',
}

This is the way you do it. Basically, your directive will have a check-all attributed and whatever $scope variable you pass to it from the controller's view, you can modify that variable inside the directive and the value will be reflected back in the controller.

So for example, lets say your controller has a scope variable called testValue. Then you can use it in markup like so:

<div class="checkbox" ng-repeat="item in items">
    <check-box check-all="testValue"></check-box>{{item.name}}
</div>

And now whatever the directive does to checkAll in the directive's link function will be reflected in your controller's $scope.testValue.

So if you want some other variable in your controller to get a different value, just add another attribute for your directive like checkAll and it should do the job.

Hope that helps.

UPDATED:

I read your code properly and I think I know what you need. Let me try to churn it out for you.

controllers.directive('checkBox', function() {
    return {
        restrict: 'E',
        scope: {
            ngModel: '=',
            checkAll: '='
        },
        template: '<input check-all="checkAll" type="checkbox" ng-model="ngModel"/>',
        replace: true,
        link: function(scope) {
            scope.$watch('checkAll', function(newVal){
                scope.check = newVal;
            })
        }
    }
})

app.controller('test', function(){
    $scope.submit=function(){
      console.log($scope.checkboxVariable);
      // or use $http service to send the value
    }
})

HTML

<div ng-controller="test">
  <div class="checkbox" ng-repeat="item in items">
    <check-box ng-model="checkboxVariable"></check-box>{{item.name}}
  </div>
  <button type="button" ng-click="submit()">submit</button
</div>

Let me explain this a bit.

I think what you want is that your directive replaces with a checkbox input element. And when it is checked, then something in the scope must get set. The directive cannot set anything unless it is permitted to set a value on controller's scope. This you can achieve by using double binding using = setting. So we defined a new scope attribute called ngModel with double binding. And in the markup, we pass it a scope variable called check. Now when the input checkbox is checked/unchecked, the directive's scope gets its value on its own scope's ngModel variable. And since ngModel has double binding on it, it get's reflected in the controller's check variable.

Hope this helps.

Upvotes: 2

Related Questions