相對於另一個控制器內部按鈕的按鈕對齊方式

我在單獨的控制器內部有兩個按鈕。相對於另一個控制器內部按鈕的按鈕對齊方式

<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和EditButton爲bCtrl隱藏/顯示布爾。當前佈局的結果是當「添加按鈕」窗體展開時，它向下推動EditButton。我不認爲這可以通過CSS將其固定爲HTML的邏輯流程。

我正在尋找解決方案，可以讓我在頁面流量頂部的按鈕，然後是下面的表格。

比如我想：

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

似乎這不工作。

來源

2017-01-18 gxminbdd

當您指定NG控制器=「aCtrl」，創建並與特定元素自舉aCtrl的一個新的控制器實例。所以根據你的後者代碼，將會有2個aCtrl實例和2個bCtrl實例。我覺得CSS是正確的選擇。可以顯示之前切換和切換後視圖或工作小提琴或什麼的快照？ –

CSS絕對是一種選擇，甚至可以利用'position：absolute'我鼓勵你設置一個https://plnkr.co/以更好地顯示單擊按鈕時移動內容的問題 – haxxxton

請注意，你的文章沒有足夠的信息。確保你傳達了足夠的信息，以便我們可以幫助你在這 – Aravind

-2

有兩個控制器是你的要求嗎？

你可以有一個單獨的按鈕控制器，例如。 btnCtrl並使用$rootscope變量來轉換該值。如下。

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

來源

2017-01-20 07:04:50

對此使用'$ rootScope'有什麼不好的建議... – Mistalis

@mistalis感謝您的評論。你能否提出一個更優雅的方法來解決上述問題？ –

[* @ JoseRuiSantos答案*]（http://stackoverflow.com/a/41758108/4927984）非常乾淨。 – Mistalis

的問題是，ng-hide隱藏與display: none導致由元件佔據的塌陷的空間的內容。
您需要visibility: hidden也隱藏元素，但保留空間。

因此，使用ng-class代替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>

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

如您所見， bCtrl.Add按鈕保持原位，無論 aCtrl.form是否可見。

來源

2017-01-20 07:21:38

-1

這裏是你在帖子中提到的例子。 ü可以保持按鍵的控制器

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>

來源

2017-01-24 16:29:40 Sunil

它可以通過CSS來實現以外唯一的，只是包裝兩個與位置的div：相對，然後添加的位置是：絕對給Add按鈕和editButton連同上/左/右定位值。

<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

還有另外一種方式，把它們放在一個父控制器，其將持有的邏輯形式，然後之間切換每個表單都有各自的功能控制器。

這裏的第二版本的工作演示：Plunker with parent Controller

來源

2017-01-26 00:08:12

相對於另一個控制器內部按鈕的按鈕對齊方式

回答

相關問題