Alignment of buttons relative to a button inside another controller

Question

I have two buttons inside separate controllers.

<div ng-controller="aCtrl"> <button class="addButton" ng-click="toggle()"> Add </button> <form ng-hide="myVar" ng-submit="submit()"> <input ...... <input ...... </form> </div> <div ng-controller="bCtrl"> <button class="EditButton" ng-click="toggle()"> Add </button> <form ng-hide="myVar" ng-submit="submit()"> <input ...... <input ...... </form> </div> 

Note. Toggle just switches hide / show bool to back-end

As you can see, by clicking Addbutton , it will display the form for aCtrl and EditButton for bCtrl . The result of the current layout is that when you add the Add Buttons form, it discards the EditButton. I do not think this can be fixed using CSS as its logical flow of HTML.

I am looking for solutions that will allow me to have buttons at the top of the page stream, and then the forms below.

For example, I tried:

  <button ng-controller="aCtrl" class="EditButton" ng-click="toggle()"> Add </button> <button ng-controller="bCtrl" class="addButton" ng-click="toggle()"> Add </button> <div ng-controller="aCtrl"> <form ng-hide="myVar" ng-submit="submit()"> <input ...... <input ...... </form> </div> <div ng-controller="bCtrl"> <form ng-hide="myVar" ng-submit="submit()"> <input ...... <input ...... </form> </div> 

This does not work.

Answer 1

The problem is that ng-hide hides the content with display: none , which causes the space occupied by the element to crash. <y> You need visibility: hidden , which also hides the element, but retains a space.

So use ng-class instead of ng-hide :

 <div ng-controller="aCtrl"> <button class="addButton" ng-click="toggle()"> Add </button> <form ng-class="{ 'hidden' : myVar }" ng-submit="submit()"> <input ...... <input ...... </form> </div> <div ng-controller="bCtrl"> <button class="EditButton" ng-click="toggle()"> Add </button> <form ng-class="{ 'hidden' : myVar }" ng-submit="submit()"> <input ...... <input ...... </form> </div> 

and CSS

 .hidden { visibility: hidden; } 

Here is a live example:

 var myApp = angular.module('myApp',[]); function aCtrl($scope) { $scope.myVar = true; $scope.toggle = function () { $scope.myVar = !$scope.myVar; } } function bCtrl($scope) { $scope.myVar = true; $scope.toggle = function () { $scope.myVar = !$scope.myVar; } } 

 .hidden { visibility: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <section ng-app="myApp"> <div ng-controller="aCtrl"> <button class="addButton" ng-click="toggle()"> aCtrl.Add </button> <form ng-class="{ 'hidden' : myVar }" ng-submit="submit()"> <input type="text" value="aCtrl.form"> </form> </div> <div ng-controller="bCtrl"> <button class="EditButton" ng-click="toggle()"> bCtrl.Add </button> <form ng-class="{ 'hidden' : myVar }" ng-submit="submit()"> <input type="text" value="bCtrl.form"> </form> </div> </section> 

As you can see, the bCtrl.Add button remains in place, regardless of whether aCtrl.form visible or not.

Answer 2

This can only be done with css, just wrap the two in a div with the position: relative and then add position: absolute to addButton and editButton along with the values ​​for the top / left / right position.

 <div class="formContainer"> <div ng-controller="aCtrl"> <button class="addButton" ng-click="toggle()"> Add </button> <form ng-hide="myVar" ng-submit="submit()"> <h1>Add form</h1> <input type="text"> <input type="text"> </form> </div> <div ng-controller="bCtrl"> <button class="editButton" ng-click="toggle()"> Edit </button> <form ng-hide="myVar" ng-submit="submit()"> <h1>Edit form</h1> <input type="text"> <input type="text"> </form> </div> </div> 

and css:

 .formContainer { position: relative; width: 200px; padding-top: 30px; } .addButton { position: absolute; top: 0; right: 40px; } .editButton { position: absolute; top: 0; right: 0; } 

Here's a working demo: Plunker CSS Only

In other words, put them in the parent controller, which will follow the logic of switching between forms, and then each form has its own controller for its respective functions.

Here's a working demo of the second version: Plunker with a parent controller

Answer 3

Here is an example, as you mentioned in your post. u can hold the button outside your controllers.

 var myApp = angular.module('myApp',[]); myApp.controller('aCtrl', ['$scope', function ($scope) { $scope.myVar = true }]); myApp.controller('bCtrl', ['$scope', function ($scope) { $scope.myVar = true; }]); function getscope(ctrlName) { var sel = 'div[ng-controller="' + ctrlName + '"]'; return angular.element(sel).scope(); } function showForm(ctrlName) { var $scope = getscope(ctrlName); $scope.myVar = !$scope.myVar; $scope.$apply(); } 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <section ng-app="myApp"> <button class="addButton" onclick="showForm('aCtrl')"> aCtrl.Add </button> <button class="EditButton" onclick="showForm('bCtrl')"> bCtrl.Add </button> <div ng-controller="aCtrl"> <form ng-hide="myVar" ng-submit="submit()"> <input type="text" value="aCtrl.form"> </form> </div> <div ng-controller="bCtrl"> <form ng-hide="myVar" ng-submit="submit()"> <input type="text" value="bCtrl.form"> </form> </div> </section> 

Answer 4

Does two controllers have your requirement?

You may have a separate button controller, for example. btnCtrl and toogle using the $rootscope variable. Properly.

  <button ng-controller="btnCtrl" class="EditButton" ng-click="toggle()"> Add </button> <button ng-controller="btnCtrl" class="addButton" ng-click="toggle()"> Add </button> <div ng-controller="aCtrl"> <form ng-hide="$root.myVar" ng-submit="submit()"> <input ...... <input ...... </form> </div> <div ng-controller="bCtrl"> <form ng-hide="$root.myVar" ng-submit="submit()"> <input ...... <input ...... </form> </div>