Pass obj from directive to controller in AngularJS

Question

I'm trying to write a directive that get the parent controller and parent form controller and pass them as a single object to my controller, this is what I have:

HTML:

<div ng-controller="ParentController as self" ng-form="ParentForm">

  <div ng-controller="ChildController1 as self" my-parent="self.parent">
    ChildController1 parent:<br/>
    {{self.parent}}
  </div>

  <br/>

  <div ng-controller="ChildController2 as self" my-parent="self.parent">
    ChildController2 parent:<br/>
    {{self.parent}}
  </div>

</div>

JS:

myApp.directive('myParent', function() {
  var directive = {
    restrict: 'A',
    link: link
  };

  return directive;

  function link(scope, element, attrs) {
    var parentElement = element.parent();
    var parentCtrl = parentElement.controller();
    var formCtrl = parentElement.controller('form');

    var parent = parentCtrl;
    parent.form = formCtrl;

    console.log("directive parent obj: ", parent);

    // How can I pass the parent obj to controller???
  }
});

I've wrote a plunker here to better explain the situation: https://plnkr.co/edit/axnR6t2Q82IVtzftq7y7?p=preview

I know that in this case I could use controllerAs with different names in my controllers, but I need to make it work with a directive ("restrict: A" directive).

Can someone please help me with this problem?

Maciej Sikora · Accepted Answer · 2016-09-07 10:20:45Z

1

If You not declare own scope for directive then directive scope is the same as controller scope, so controller and directive can access the same scope data. If You need to do something in controller launched from directive then in controller watch scope variable using $scope.watch.

If You need pass variable from one component to another ( controller to directive or vice versa ) use services. Example service with getter and setter:

app.service("myService",function(){

  this.data;

  this.setData=function(val){

     this.data=val;
  };

  this.getData=function(val){

      return this.data;

  };

});

Add service in controller and use setData, and add it to directive and call getData.

Example controller code:

myService.setData(this.form);

Example directive

var form=myService.getData();

edited Sep 7, 2016 at 10:20

answered Sep 7, 2016 at 9:45

Maciej Sikora

20.3k4 gold badges52 silver badges50 bronze badges

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

4 Comments

pardie Over a year ago

I've tried to follow your advice using the same $scope, and I updated my plunker: plnkr.co/edit/axnR6t2Q82IVtzftq7y7?p=preview The problem now is that I can't get self.parent inside my controller...

Maciej Sikora Over a year ago

@wizzy var self = this; self is local variable and can not be accessed from directive.

pardie Over a year ago

Thank you... so, if I understand, my only solution is to use a service... The problem is, if I'm not wrong, the service (and the data I store in it) persist in my application life... but I only need them only in my controller when I call my router view... I would not increase my application footprint!

Maciej Sikora Over a year ago

@wizzy i don't get it, You have access to Your controller in Your code so why You need self=this?

Collectives™ on Stack Overflow

Pass obj from directive to controller in AngularJS

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related