Question

我在单独的控制器内有两个按钮。

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

注意：切换只是在后端切换hide / show bool

正如您在点击Addbutton时所看到的那样，它会为aCtrl显示EditButton和bCtrl的表单。当前布局的结果是当Add Buttons表单展开时它会向下推动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>

这似乎无法发挥作用。

Answer 1

问题在于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按钮都会保留在原位。

Answer 2

它可以通过css完成，只需将两个包装在一个div中，位置为：relative，然后将position：absolute添加到addButton和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

Answer 3

以下是您在帖子中提到的示例。你可以把按钮放在控制器外面

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

您的要求是否有两个控制器？

您可以拥有一个单独的按钮控制器，例如。使用$rootscope变量btnCtrl和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>

按钮对齐另一个控制器内的按钮

4 个答案: