Wyrównanie przycisków względem przycisku wewnątrz innego kontrolera

Question

Mam dwa przyciski wewnątrz oddzielnych kontrolerów.

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

Uwaga: Stosuj tylko przełącza bool hide/show na back-end

Jak widać po kliknięciu Addbutton pokaże formę dla aCtrl i EditButton dla bCtrl. Wynikiem obecnego układu jest to, że po rozwinięciu przycisku Dodaj przyciski popycha przycisk EditButton. Nie sądzę, że można to naprawić za pomocą CSS jako logicznego przepływu HTML.

Szukam rozwiązań, które pozwolą mi mieć przyciski u góry strony, a następnie formularze poniżej.

na przykład próbowałem:

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

które nie wydają się działać.

Answer 1

Czy posiadanie dwóch kontrolerów jest Twoim wymaganiem?

Możesz mieć oddzielny kontroler przycisku dla np. btnCtrl i toogle wartość przy użyciu zmiennej $rootscope. Następująco.

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

Answer 2

Problemem jest to, że ng-hide ukrywa zawartość z display: none dająca przestrzeń zajmowaną przez element do upadku.
Potrzebujesz visibility: hidden, który również ukrywa element, ale zachowuje spację.

Dlatego używaj ng-class zamiast 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> 

i CSS

.hidden { 
    visibility: hidden; 
} 

Oto próbka żywo:

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>

Jak widać, przycisk bCtrl.Add pozostaje na miejscu, niezależnie od tego, czy aCtrl.form jest widoczny, czy nie.

Answer 3

Oto przykład jak wspomniano w twoim poście. Można u przycisk trzymać poza swoimi kontrolerami

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

Można to zrobić za pomocą css tylko, po prostu owinąć dwa w div z position: relative a następnie dodać position: absolute do addButton i editButton wraz z wartościami pozycjonowania w górę/w lewo/w prawo.

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

i css:

.formContainer { 
    position: relative; 
    width: 200px; 
    padding-top: 30px; 
} 

.addButton { 
    position: absolute; 
    top: 0; 
    right: 40px; 
} 

.editButton { 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

Oto demo robocze: Plunker CSS Only

Jest inny sposób, umieścić je w kontrolerze macierzystej, która będzie posiadać logikę za przełączanie pomiędzy formami, a następnie każdy formularz ma własny kontroler dla odpowiednich funkcji.

Oto demo działa od drugiej wersji: Plunker with parent Controller