How can I get data from controller to directive when I click

Question

I am trying to send the data to directive link function from controller when i used ng-clicked, but I failed to send the data to directive, the directive is calling when the page was loading at first time

here is my html code

 <h2 ng-click="clickMe(somedata)"> click </h2>

    <my-directive my-key="myVal"> </my-directive>

here is my controller

.controller('myController',function($scope){

$scope.clickMe=function(somedata){
$scope.myVal=somedata;
};

});

my directive

.directive('myDirective',function(){
return{
  restrict:'E',
  scope:{
    myKey:'='
        },
  templateUrl:'exampleTempl.html',
  controller:'myController',
  link:function(scope,elem,attr){
   console.log(scope.myKey); // getting undefined
   console.log(scope.myVal); //here i want the data from controller when i clicked on ng-click
  }
}
});

use $rootscope instead scope hope it'll work take a look at [this](http://jsbin.com/bequy/1/edit?html,js,output) — Curiousdev, Dec 26 '16 at 12:28

score 3 · Answer 1 · edited May 23 '17 at 12:08

You can pass data through services or you can use $rootScope for that, but using root scope is bad practice. So, use services. There should be more ways to do that, but services are pretty good.

Here is the clear example for passing data via services: AngularJS Service Passing Data Between Controllers

And another one for $rootScope: How to pass an object using $rootScope?

Updated:

You can also pass data through parent-child controllers via $scope.$emit and $scope.$broadcast, but remember, it's true only for parent-child controllers.

But you can do the same things with $rootScope like $rootScope.$emit and $rootScope.$broadcast. If you will use it, it doesn't matter anymore, how controllers relate to each other (this is true for "brothers" controllers too).

This article should help you: https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

can you please give me an example using `$rootScope` and by using `services` @Commercial Suicide — Midhunsai, Dec 26 '16 at 12:35

kemal akoğlu · Answer 2 · 2016-12-26T12:43:24.553

2

I hope it works for you;

.directive('myDirective',function(){
return{
  restrict:'E',
  scope:{
    myKey:'=bindingmyVal'
        },
  templateUrl:'exampleTempl.html',
  controller:'myController',
  link:function(scope,elem,attr){
   console.log(scope.myKey); //here i want the data from controller when i clicked on ng-click
  }
}
});

edited Dec 26 '16 at 12:43

answered Dec 26 '16 at 12:29

kemal akoğlu

182
13

it is showing `undefined` on loading the directive not getting the data @kemal akoglu – Midhunsai Dec 26 '16 at 12:37

score 1 · Answer 3 · answered Dec 26 '16 at 21:58

Since the controller is inside the directive on an isolate scope, its functions are not available to the parent scope. Set the variable directly:

<!-- REPLACE 
<h2 ng-click="clickMe(somedata)"> click </h2>
-->
<!-- WITH -->
<h2 ng-click="myVal = somedata"> click </h2>

<my-directive my-key="myVal"> </my-directive>

In the directive controller use the $onChanges Life-Cycle Hook¹

directiveApp.controller('myController',function(){

    this.$onChanges = function(changesObj) {
        if (changesObj.myKey) {
            var val = changesObj.myKey.currentValue;
            console.log(val);
        };
    };  
});

For more information, see AngularJS Comprehensive Directive API - Life-Cycle Hooks

This is the simplest answer in this case. +1 – Mistalis Jan 05 '17 at 10:18 — Mistalis, Jan 05 '17 at 10:18

How can I get data from controller to directive when I click

here is my html code

here is my controller

my directive

3 Answers3