passing defined object to another custom directive angularjs

Question

so I have this custom directives that you could see below.

myApp.directive('myDirective', function (testService) {
    return {
        restrict:'EA',
        link:function (scope, element, attr) {
           //defined the object
           var object = new object();
           testService.setObject(object);
    }
   }
});

myApp.directive('mySecondDirective', function (testService) {
    return {
        restrict:'EA',
        link:function (scope, element, attr) {
           //call the variable from previous custom directive
           console.log(testService.getobject()); -> always return undefined
    }
   }
});

and this is the html structure where I used the directives above.

<my-directive></my-directive>

<my-second-directive></my-second-directive>

there I want to retreive the object that contains new object() from previous custom directive, but it always return an undefined I wonder how could I do this without using require nor isolated scope as well.. could you guys help me ?

UPDATE I create a service to provide the facility to set and retreive the object and apparently it returned undefined because I set the custom direcitve this way

<my-second-directive></my-second-directive>

<my-directive></my-directive>

and this is the service

define(
        ['services/services'],
        function(services)
        {
            'use strict';

            services.factory('testService', [function() {
                    var me = this;
                    var testObject = '';

                    return {
                        setObject: function(object) {
                            me.testObject = object;
                        },
                        getObject: function() {
                            return me.testObject;
                        }
                    }
                }
            ]);
        }
);

the thing is that I actually set the html markup like I already mentioned above which is

<my-second-directive></my-second-directive>

<my-directive></my-directive>

so could you give me some advice on how should I do this ?

note* that the passing object actually worked I prefer using services because it will easy to mantain latter. The question is how do I make the object accessible from another directive even though the initiate install of the object (set the object) in the directive that I defined at the html markup, as the last position of the html it self ?

UPDATE this is the PLUNKER that I've been made for you to understand the question it self

Try using scope.object = new object(); in the first directive. Access the same in second directive using scope.object — Srinivas Paila
– Srinivas Paila, Commented Oct 28, 2014 at 18:12
already tried it but still returned with undefined response :( @SrinivasPaila — Eka Rudianto
– Eka Rudianto, Commented Oct 29, 2014 at 3:10
I create a plunker for this please have a look plnkr.co/edit/JnDYxyzSWSQLplCDbI6Y?p=preview @SrinivasPaila — Eka Rudianto
– Eka Rudianto, Commented Oct 29, 2014 at 4:43

gmartellino · Accepted Answer · 2014-10-29 05:29:20Z

1

You could achieve this by firing a custom event and then listening for it in the second directive. Here's an updated plunker: http://plnkr.co/edit/512gi6mfepyc04JKfiep?p=info

Broadcast the event from the first directive:

app.directive('myDirective', function(testService) {
  return {
    restrict: 'EA',
    link: function(scope, elm, attr) {
      var object = {};
      testService.setObject(object);
      console.log('setting object');
      scope.$broadcast('objectSet');
    }
  }
});

... and then listen for it on the second:

app.directive('mySecondDirective', function(testService) {
  return {
    restrict: 'EA',
    link: function(scope, elm, attr) {
      scope.$on('objectSet', function(){
        console.log('retrieving object', testService.getObject());
      })
    }
  }
});

You could also pass data along with the event, if you wanted to emit a specific piece of data to be picked up by the second directive.

answered Oct 29, 2014 at 5:29

gmartellino

7075 silver badges16 bronze badges

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

1 Comment

Eka Rudianto Over a year ago

yes it worked but it wrapped inside the $on functionality, whereas what I wanted is use it inside the directive it self.. I update the plunker plnkr.co/edit/kALqqab9Qu24Hl78gPls?p=preview could you give me some advice regarding this issue ? @gmartellino

dfsq · Accepted Answer · 2014-10-28 18:23:16Z

0

1). Scope. Since you don't want to use controllers and isolated scope, then you can simply set this object as scope property.

myApp.directive('myDirective', function() {
    return {
        restrict: 'EA',
        link: function(scope, element, attr) {

            var object = {};
            object.test = 21;

            // set object as scope property
            scope.object = object;
        }
    }
});

myApp.directive('mySecondDirective', function() {
    return {
        priority: 1,  // priority is important here
        restrict: 'EA',
        link: function(scope, element, attr) {
            console.log('Retrieve: ', scope.object);
        }
    }
});

Just make sure you are also defining priority on the second directive (only if both directive a applied to the same element) to make sure it's evaluated in proper turn (should be bigger then the one of myDirective, if omitted it's 0).

2). Service. Another simple solution is to use service. You can inject custom service into both directives and use it storage for you shared object.

edited Oct 28, 2014 at 18:23

answered Oct 28, 2014 at 18:16

dfsq

193k26 gold badges244 silver badges261 bronze badges

1 Comment

Eka Rudianto Over a year ago

yap already sets the priority as well but still returned with undefined response :( @dfsq

Srinivas Paila · Accepted Answer · 2014-10-29 21:12:31Z

Expanding from what @gmartellino said.

Anything that you wanted to do after listening to the event in second directive, can have a callBack method and use it.

app.directive('mySecondDirective', function(testService) {
  return {
    restrict: 'EA',
    link: function(scope, elm, attr) {
      // what if I created like this ? 
      // define the test variable
      var test;

      scope.$on('objectSet', function(){
        //set the variable
        test = testService.getObject();
        console.log('retrieving object : ', testService.getObject());

        //Anything that you wanted to do 
        //after listening to the event 
        //Write a callBack method and call it
        codeToExecuteAsCallBack();
      })

      //then use this method to make a call back from the event 
      //and outside the event too.
      var codeToExecuteAsCallBack = function(){
        console.log(test);
      }
      codeToExecuteAsCallBack();
    }
  }
});

Updated plnkr link

Collectives™ on Stack Overflow

passing defined object to another custom directive angularjs

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related