Show a div with AngularJS

Question

I am searching how to show a div with AngularJS. I read some topic on StackOverflow but when I try to apply them, it doesn't works for my case... This is my HTML code :

  <div id="myPanel" ng-controller="controllerDependance" ng-show="myvalue" class="ng-cloak">
      Blablabla
  </div>


<div id="DivWhereIsMyButton" class="clearfix" ng-controller="controllerBubble">
    Another div where is my button
    <div id="containerButton" ng-controller="controllerDependance">
        <button class="btn btn-danger btn-lg pull-right"
                ng-click="showAlert()">View dependances
        </button>
    </div>
</div>

This is the controller :

d3DemoApp.controller('controllerBubble', function () {

});

d3DemoApp.controller('controllerDependance', function ($scope) {
    $scope.myvalue = false;
    $scope.showAlert = function(){
        $scope.myvalue = true;
    };
});

I initially thought, it is controllerOther take the hand and cancel the controllerDiv but even if I separate the both, it doesn't works. The problem is I am obligated to put the both in two differents controllers.

I have two controllers, controllerDependance and controllerBubble. My div to show is in the controllerDependance. My button is in a div controllerBubble and I can't move it. So I would like to wrap it in a div controllerDependance. I make a Plunker to show you the problem : https://plnkr.co/edit/z1ORNRzHbr7EVQfqHn6z?p=preview Any idea ? Thanks.

Answer 1

Put the div you want to show and hide inside the controller. It needs to be within the scope of the controller, otherwise your controller function cant see it. Also, consider what you are trying to accomplish with the nested controllers, I often find them unnecessary.

<div id="divButton" class="clearfix" ng-controller="controllerOther">
    <div id="buttonToShowDiv" ng-controller="controllerDiv">
        <button class="btn btn-danger btn-lg pull-right" ng-click="showAlert()">Show my div</button>

        <div id="myDiv"ng-show="myvalue" class="ng-cloak">
            Blablabla
        </div>
    </div>
</div>

I notice in your original example you are declaring ng-controller="controllerDependance" twice in the DOM. I have never tried this before, but I can imagine this will cause problems. From the angular documentation on controllers

When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope

I imagine that this is what is causing you problems. You have to have the div you want to show/hide within the scope of your controller.

I got your plunkr working, you can see my version here: https://plnkr.co/edit/NXbsVFMNHR8twtL8hoE2?p=preview

The problem was stemming from you declaring the same controller twice, and more importantly, the div to show/hide was using ng-show with a value from your mainController. But your div was outside that controller. So ng-show cant see the value. The div has to be withing the scope of the controller

Answer 2

You are using two different controllers which have different $scopes therefore their values are not connected! To show or hide a div is really simple in angular:

<div id="divButton" class="clearfix" ng-controller="myController">
<div id="buttonToShowDiv">
    <button class="btn btn-danger btn-lg pull-right" ng-click="showAlert()">Show my div</button>
</div>

   <div id="myDiv" ng-show="myvalue" class="ng-cloak">
      Blablabla
   </div>
</div>

And the script side just almost the same:

d3DemoApp.controller('myController', function AppCtrl ($scope) {
$scope.myvalue = false;
$scope.showAlert = function(){
    $scope.myvalue = true;
};
});

Since you question was how to show elements using angular, I took the liberty of using just one controller.

Answer 3

Create a factory that will return an object and let your controllers work with a reference to the same object:

var d3DemoApp = angular.module('app', [])

d3DemoApp.factory('MyValue', function () {
    return { value: false };
});

d3DemoApp.controller('controllerBubble', function ($scope, MyValue) {
    $scope.myvalue = MyValue;
});

d3DemoApp.controller('controllerDependance', function ($scope, MyValue) {
    $scope.myvalue = MyValue;
    $scope.showAlert = function(){
        $scope.myvalue.value = true;
    };
});

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>

    <body>
        <div ng-app="app">
            <div ng-controller="controllerBubble" class="clearfix">
                <div id="myPanel" ng-controller="controllerDependance" ng-show="myvalue.value" class="ng-cloak">
                    Blablabla
                </div>
            </div>


            <div id="DivWhereIsMyButton" class="clearfix" ng-controller="controllerBubble">
                Another div where is my button
                <div id="containerButton" ng-controller="controllerDependance">
                    <button class="btn btn-danger btn-lg pull-right" ng-click="showAlert()">View dependances</button>
                </div>
            </div>
        </div>
    </body>
</html>