CODEWITHSUNDEEP
angularjs
user3415447
user3415447

Reputation: 93

how to pass value from directive to controller

Can anybody give me a simple example on how to exchange data between the directive and controller. I am a newbie to angularjs and i want to learn how to pass data from cotroller to directive and then back to controller. I have learnt on how to pass value from controller to directive ,but the poblem is I cant achieve the value from directive back to controller ..can somebody help

html code

 <div ng-controller="MyCtrl">
<pass-object obj="obj"></pass-object>
 </div>

javascript code

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

 myApp.directive('passObject', function() {
return {
    restrict: 'E',
    scope: { obj: '=' },
    template: '<div>Hello, {{obj.prop}}!</div>'
};
});

myApp.controller('MyCtrl', function ($scope) {
$scope.obj = { prop: "world" };
});

Upvotes: 1

Views: 6313

Answers (3)

Omar.Alani
Omar.Alani

Reputation: 4130

You achieve that through some options like :

1- In case your scope was shared scope, then your directive can access and change the parent scope data directly.

2- In case your scope was isolated scope, you can create a service that you can update and shared it with your controller(s), and your controller(s) can watch the values in that service and act accordingly.

3- In case your scope was isolated scope, another way to pass data back is to assign a method to your directive scope and from the directive you can execute that method and pass your data to controller, one trick you need to pay attention to in this case is that you have to override the arguments of that function when you call the method from the directive.

EDIT:

Because of that point 3 is not straightforward, this code should give you a starting point.

(function(){
  angular.module("app", [])
  .directive("passObject", function(){
    return {
      restrict : "E",
      template: "<input type='button' ng-click='notifyParent()' value='Notify Parent'></input>",
      scope : {
        dirParam : "&func"
      },
      controller: function($scope){
        $scope.notifyParent = function(){
        if($scope.dirParam){
          $scope.dirParam({p1 : 10})
        }          
        }
      }
    }
  })
  .controller("mainCtrl", function(){
    var vm = this;

    vm.myFunc = function(p1){
      console.log("This alert is in the main controller, and the value " + p1 + ", I got from the directive");
      alert(p1);
    }
  });
})();

Html code : 

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="mainCtrl as ctrl">
    <pass-object func="ctrl.myFunc(p1)">

    </pass-object>


  </body>

</html>

Hope that helps.

Upvotes: 2

Jackie
Jackie

Reputation: 127

if you define isolated scope variable as '=', it is already two-way binded.

app.directive('passObject', function() {
  return {
    restrict: 'E',
    scope: {
      obj: '='
    },
    template: '<div>=====Inside directive===== <br/> Hello, {{obj.prop}}! <br/><input type="text" ng-model="obj.prop"/></div>'
  };
});

check out this plunker

demo

Upvotes: 1

vpsingh016
vpsingh016

Reputation: 703

you can use the same scope variable using link function

js code

var myApp = angular.module('myApp', []);
myApp.directive('passObject', function() {
  return {
    restrict: 'E',
    scope: {
      obj: '='
    },
    template: '<div>Hello, {{obj.prop}}! <button ng-click="changeValue()">Change Value</button></div>',
    link: function(scope, element, attrs) {
      scope.changeValue = function() {
        scope.obj.prop = "Change form directive";
      }
    }
  };
});

myApp.controller('MyCtrl', function($scope) {
  $scope.obj = {
    prop: "world"
  };
});

html code

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <pass-object obj="obj"></pass-object>
    <div>
      Controller {{obj.prop}}
    </div>
  </div>
</div>

code pen demo link

Upvotes: 1

Related Questions