AngularJS - ng-hide with different ng-controller

Question

here is my problem : When I double click in a row of an array, I want to make disappear several parts of my page. The problem is...I don't figure out how to do this.

Basically, here is my html file:

<div id="mainWindow" ng-hide="hideAlias" ng-controller="mainWindow">
...
<div id="table{{workspace.name}}" class="table" ng-controller="table" >
    <table id="mainTable" class="mainTable">
        <tr class="tableHeader">
            <th>AA</th>
            <th>BB</th>     
            <th>Options</th>
        </tr>
        <tr class="tableRows" id ="{{row}}" ng-repeat = "row in rowstable">
            <td ng-dblclick="dblclick()" >{{row.AA}} </td>
            <td>{{row.server}} <input type="button" ng-click="clickOnDeleteServer(row.BB)" value="X" style="float:right"/></td>
            <td>
                <input type="button" ng-click="clickOnView()" value="View"></input>
                <input type="button" ng-click="clickOnDelete(row.AA)" value="Delete"></input>   
            </td>   
        </tr>

    </table>
</div>

...
</div>

I have tried to do this, inside the controller "table" :

$scope.dblclick = function(){
    mainWindow.hideAlias=!mainWindow.hideAlias
}

The value of hideAlias change from false to true when I double click, and vice-versa. However, nothing happens on the page (nothing gets hidden)

Any clue ? Thanks a lot

EDIT :

controller definition : function table($scope, $http, $route){

Answer 1

the variable hideAlias doesn't exist on the mainWindow controller. What you want to do is share data between the mainWindow controller and the table controller.

There's a few ways of doing this, I'll show you one

Sharing data between controllers via Event emmiters

At high level, controller Table will send data to Controller MainWindow, and controller Table is child of controller MainWindow, so here's how you do it with event emmiters:

    Controller mainWindow:


    $scope.$on('EventFromTableController',function(data){

          $scope.hideAlias = data.hideAlias;

    });

This will tell controller mainWindow to listen for the EventFromTableController event. That event will contain data attached. In this case it will hold the hideAlias value from the child controller.

Now at controller Table:

    Controller table:

    var tableHideAlias = true; // initialize it to true or false

    $scope.dblclick = function(){
        //change the local tableHideAlias state
        tableHideAlias = !tableHideAlias;

        // emit the new hideAlias value
        $scope.$emit('EventFromTableController',{hideAlias: tableHideAlias}); 

    }

so when dblclick executes, it will send the new hideAlias value to the parent controller (mainWindow).

This way, ng-hide will have a hideAlias scope variable to evaluate it's state.

Answer 2

You can achieve this in simple way.

In your case controller, mainWindow is the parent controller and controller, table is the child controller.

Create an object for the parent controller and access or change the value from child controller on double click event.

var app = angular.module('myapp',[]);
app.controller('mainWindow',function($scope){
    $scope.parentobj = {};
    $scope.parentobj.hideAlias = false;
});
app.controller('table',function($scope){
    $scope.dblclicktest=function()
    {
        $scope.parentobj.hideAlias=true;
    }
});

and use the parent object scope in html to hide Div

<div id="mainWindow" ng-hide="parentobj.hideAlias" ng-controller="mainWindow">

Here is the JSFiddle

In the JSFiddle, double click on AA will hide the div.