Question

我正在开发一个使用AngularJS和Bootstrap的应用。我的应用程序的基本结构是这样的：

home.html的

<body ng-controller="MyController">
  <div class="container">
    The main content goes here
  </div>

  <div class="footer">
    <div class="container">
      <button class="btn btn-info" ng-click="showScreenA()"><span class="glyphicon glyphicon-font"></span></button>
      <button class="btn btn-info" ng-click="showScreenB()"><span class="glyphicon glyphicon-bold"></span></button>      
    </div>
  </div>
</body>

home.js

myApp.controller('MyController', [function($scope) {
  $scope.showScreenA = function() {
    // Display screen A whether screen B is open or if the main content is shown. 
    // No difference.
  };

  $scope.showScreenB = function() {
    // Display screen B whether screen A is open or if the main content is shown. 
    // No difference.
  };
}]);

理想情况下，我希望div能够从屏幕A或屏幕B的顶部进行动画制作。div不能以任何方式覆盖页脚。我想了几个选择。但是，我无法找到一个很好的方法来做到这一点。起初，我想过使用Bootstrap Modal。但是，我无法让它与页脚一起工作。此外，还有比我想要的更多的铬。

有谁知道怎么做？

谢谢！

Answer 1

您可以使用ng-show控制可见性，使用ngAnimate控制动画。

我用一个简单的例子做了一个plunkr： http://plnkr.co/edit/4GcqBpOB5lBiGVv3YhK5?p=preview

请确保将angular-animate.js添加到您的网页并在您的应用中注入ngAnimate：

var app = angular.module('plunker', ['ngAnimate']);

app.controller('MainCtrl', function($scope) {
  $scope.showScreenA = function() {
    $scope.screen = 'A'; 
  };

  $scope.showScreenB = function() {
    $scope.screen = 'B';
  };
});

希望有所帮助。

Answer 2

我不完全确定你是在尝试使用你的网页。我建议不要写两个单独的函数，使用单个函数更好地服务并传递（A或B）作为参数，然后编写条件语句。

ng-click="showScreen(a) & ng-click="showScreen(b)


$scope.showScreen = function(item){
   if(item === a){} else if (item === b){};
}

我将页脚的z-index设置为更高的值，并将要在函数中显示的div设置为在CSS中具有较低的z-index，而不在控制器代码中更改它。 / p>

创建图层

2 个答案: