他のコントローラ内のボタンに対するボタンのアライメント

Question

別のコントローラの中に2つのボタンがあります。

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

注：Addbuttonをクリックすると、それはaCtrlとbCtrlためEditButtonためのフォームが表示されます見ることができるようにトグルがちょうどバックエンド

で表示/非表示ブール値を切り替えます。現在のレイアウトの結果は、Add Buttonsフォームが展開されてEditButtonを押し下げたときです。私はこれをHTMLの論理的な流れとしてCSSで修正できるとは思わない。

私は、ページの流れの先頭にボタンを置いて、下のフォームを表示できるようなソリューションを探しています。例えば

私が試した：動作していないよう

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

を。

Answer 1

コントローラが2つあることはあなたの要件ですか？

たとえば、ボタンのコントローラを別に持つことができます。 btnCtrlと$rootscope変数を使用して値をtoogleに送ります。次のように。

<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

問題はng-hideが崩壊する素子の占有スペースを起こしdisplay: noneとコンテンツを隠していることです。
visibility: hiddenも必要ですが、要素を非表示にしますが、スペースを保持する必要があります。したがって

、代わりにng-hideのng-classを使用します。

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

ここでCSS

.hidden { 
    visibility: hidden; 
} 

は、ライブのサンプルです：

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>

ご覧のとおり、 aCtrl.formが表示されているかどうかにかかわらず、 bCtrl.Addボタンがそのまま残ります。

Answer 3

ここにあなたの投稿に記載されている例です。相対して、位置を追加します：addButtonとeditButtonに絶対的にuがそれはちょうど位置にdiv要素に2をラップし、唯一のCSSを介して行うことができ、あなたのコントローラ

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

の外にボタンを保つことができます上/左/右の測位値とともに表示されます。

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

とCSS：

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

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

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

はここで働いてデモです：Plunker CSS Only

別の方法があります、その後、フォームとを切り替えるためのロジックを開催する親コントローラにそれらを置きます各フォームはそれぞれの機能性のための独自のコントローラを持っています。あなたはNG-コントローラ=「aCtrl」を指定Plunker with parent Controller