0

Let's say my grandparent component/directive's scope variable is declared like this: $scope.g = { // methods here };

In each of my nested component's/directive's controllers, I'm referring to that variable like $scope.$parent.$parent.g and then calling some function off of g such as $scope.fromNgClick = function() { $scope.$parent.$parent.g.run(); };. That works great (though I would like a better way of referring to ancestors such as an alias name? instead of a $parent chain).

When I natively drag a component from it's grandparent component into another grandparent sibling component (got that?), the same $scope.fromNgClick = function() { $scope.$parent.$parent.g.run(); }; still points to the original scope, not the new one like I need it to. So clicking the same ng-clickable element still triggers the run() method on the previous grandparent's scope.

That all makes sense; but, is there a way to get the scope to point to the new dropped locations grandparent scope instead?

Thanks!

EDIT
The markup would be something like the following where <g-directive> is treated as a grandparent because it uses transclude on its template, ultimately wrapping the child directives:

<g-directive>
    <child-directive></child-directive>
    <another-child-directive></another-child-directive>
    <yet-another-child-directive></yet-another-child-directive>
</g-directive>
<g-directive>
    <c-child-directive></c-child-directive>
    <c-another-child-directive></c-another-child-directive>
    <c-yet-another-child-directive></c-yet-another-child-directive>
</g-directive>

That's the reason for the $scope.$parent.$parent.g on the child directives/components.

A child component can be dragged and then dropped into another <g-directive> but it's controller still points to its original grandparent (original <g-directive>'s controller scope variable). I want it to point to the new grandparent is was dropped into, essentially resetting it's scope to the newly placed scope.

Modular
  • 6,440
  • 2
  • 35
  • 38
  • if you want to have a look at this: http://stackoverflow.com/questions/11252780/whats-the-correct-way-to-communicate-between-controllers-in-angularjs Not sure why you need to call so many parents from your current scope. – batmaniac7 Jul 07 '16 at 20:26
  • @maddog I think that is helpful for some other situations, but I don't know how that would resolve the child's scope reference to a new grandparent. – Modular Jul 07 '16 at 20:50
  • you can `emit` and `broadcast` to call other controllers. and use sharing service or a `$rootScope` variable to share data. – batmaniac7 Jul 07 '16 at 20:51
  • @maddog In this case though, even with emiting pseudo events to call methods, how do I differentiate between which needs to be called if all instances are watching for the same event? These are all dynamic. I could have any number of 's with any number of nested directives/components and those nested components need to only ever trigger their *current* 's method for whichever one they've been moved/dropped into at that moment. Even passing in data wouldn't let me know which parent is the current one as they can start anywhere. :/ – Modular Jul 07 '16 at 21:13
  • i think this might solve your problem (scope.emit): http://stackoverflow.com/questions/26752030/rootscope-broadcast-vs-scope-emit – batmaniac7 Jul 07 '16 at 21:20
  • also you can assign numbers from your code to specific parents/child – batmaniac7 Jul 07 '16 at 21:21
  • @maddog That was a really good article and works really well generally, but even when using that method, the pointers are still on the original scope the child component was within. – Modular Jul 07 '16 at 21:34
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/116736/discussion-between-atomtech-and-maddog). – Modular Jul 07 '16 at 21:38

1 Answers1

0
<g-directive some-attr=1>
 <child-directive></child-directive some-attr=1>
 <another-child-directive></another-child-directive some-attr=1>
 <yet-another-child-directive></yet-another-child-directive some-attr=1>
</g-directive>

<g-directive some-attr=2>
 <child-directive></child-directive some-attr=2>
 <another-child-directive></another-child-directive some-attr=2>
 <yet-another-child-directive></yet-another-child-directive some-attr=2>
</g-directive>

Each can have different listener for broadcast and emit.

if the directives are repeated through ng-repeat then the $index can be that attribute. Hope this helps.

batmaniac7
  • 422
  • 5
  • 17
  • Thanks for the details yesterday. Instead of doing that work around, I managed to change the wrapping component's structure to address the some of the functionality I originally had assigned to the nested components, and that has been working okay for my use-case. – Modular Jul 08 '16 at 21:34