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){

Why are use referencing `hideAlias` through `mainWindow`? Can you paste your controller definition? AFAIK, it should be `$scope.hideAlias` and not `mainWindow.hideAlias` - reference it through the controller scope and not the controller itself. — callmekatootie, Mar 27 '14 at 17:14
Yes,I have tried with $scope but it didn't work so I was trying something else. I have edited my message with th controller definition (not sure if it is what you meant :) ) — WellWellWell, Mar 27 '14 at 17:26

score 1 · Accepted Answer · answered Mar 27 '14 at 17:43

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.

You're welcome mate. Please note though that there other options such as creating a Service and pass it as a dependency to the mainWindow and table controllers. I personally like Event Emmiters model though :) — António Sérgio Simões, Mar 27 '14 at 17:54
By the way, this works with $emit because we're sending events _from_ the _child_ controller to the parent controller. If you wanted to send events _from_ the _parent_ controller to the child controllers, you would use $broadcast instead. — António Sérgio Simões, Mar 27 '14 at 17:57

score 1 · Answer 2 · answered Mar 27 '14 at 18:22

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.

AngularJS - ng-hide with different ng-controller

2 Answers2

Linked