interapplication communication

[Marc B]

Hello,

I have a page with 2 small angular applications. Each application consists of a directive that makes a window element draggable and inserts a titlebar with closebox in the element it's defined on. Initially only window2 is visible with a button1 that, when clicked, displays window 1. Thats why window1 and button1 are in the same app / share the same scope. Now when I click the closebox of window2 in the other ng app window2 closes but I _also_ want the button1 in ngapp1 to disappear.
How can I do that if that element is in another application? I tried using $scope.$emit() / $rootScope.$on() (and variations) but that does not work -  the handler designated by $rootScope.$on() never fires.

The setup looks like this

<div>
    <div id="ngapp1">
        <div draggable id='window1'>
        <div button id="button1">
    </div>
</div>

<div>
    <div>
        <div>
            <div id="ngapp2">
                <div draggable id="window2">
[..]

Can I use scope.$emit() / scope$on() to communicate between 2 different angular apps? Does the fact that ngapp1 is not a parent of ngapp2 (it's a nephew) matter?

Thanks

[Marc B]

addition - I have 2 distant applications but they have the same name -

angular.bootstrap('#cywContainer',['myapp']);
angular.bootstrap('.cywNote',['myapp']);

I guess this makes them separate instances, only sharing the $rootScope, right?

[gp]

Can you please share your code on jsfiddle?

[Marc B]

I created a setup similar to what I have here.
summarising:
2 applications, bootstrapped via angular.bootstrap(<selector>,<appname>) whereby the directive in app2 tries to communicate to the directive in app1 via scope.$broadCast("removeButtonA"). app2 has a line scope.$on("removeButtonA",handler); that does not seem to be called at all.
I am not able to include JQuery in the fiddler so I can't make use of all selectors but in my local setup I do have the full JQuery library included and even then the event does not seem to trigger the directive.

Thanks for help

[Marc B]

From app a u have access to (the scope of element in) app b by doing this:

angular.element(DOMSelector).scope();

Now you have a reference to hte scope of appb and can call any method, access keys etc.

DOMSelector is the JQuery selector for the element in the application u want to access.
Remember that JQLite only allows for element selectors. To use classes or id's in selectors include the JQuery lib

Thanks to Misko