Looking for a way to display a div using AngularJS, I came across some solutions on StackOverflow. However, implementing them did not work in my case. Here 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 thought that maybe controllerOther was interfering and preventing controllerDiv from functioning properly, but even after separating the two controllers, the issue persisted. The challenge lies in the fact that I need to keep both elements in separate controllers.
With two controllers, controllerDependance and controllerBubble, my desired div resides within controllerDependance while my button is housed in a div managed by controllerBubble. Unfortunately, moving the button is not an option. Therefore, I am looking to encapsulate it within a div controlled by controllerDependance. I have created a Plunker to demonstrate the problem: https://plnkr.co/edit/z1ORNRzHbr7EVQfqHn6z?p=preview Any suggestions? Thank you.