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
– callmekatootie, Commented Mar 27, 2014 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
– WellWellWell, Commented Mar 27, 2014 at 17:26

António Sérgio Simões · Accepted Answer · 2014-03-27 17:43:56Z

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.

answered Mar 27, 2014 at 17:43

António Sérgio Simões

9917 silver badges11 bronze badges

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

2 Comments

António Sérgio Simões Over a year ago

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 Over a year ago

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.

myaseedk · Accepted Answer · 2014-03-27 18:22:44Z

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.

Collectives™ on Stack Overflow

AngularJS - ng-hide with different ng-controller

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related