AngularJs在模态中注入模板html

Question

我必须模拟滑块的功能，它具有一些控件，如“ 下一个/上一个”按钮和“切换全屏”按钮 。 在toogle全屏上，我必须在拉伸模式下显示滑块，我已经使用z-index进行了此操作，但是它不起作用，因为Slider的父级的z-index低于其同级的z-index。 你可以在这里看到实现

http://jsfiddle.net/HB7LU/22326/

<div id="slide"  ng-class ='{fullscreen:isFullScreen}'   
     style="background : #FFEB3B;padding: 20px; margin:10px;" >
  content of page {{currentPageNo}}
    <div class="control">
        <button ng-click="nextPage();">Next Page</button>
        <button ng-click="isFullScreen = !isFullScreen;">Toggle Full Screen</button>
    </div>
</div>

• 一种可能的解决方案是使用javascript更改滑块父级及其同级的z-index。
• 其他可能的解决方案是在主体中添加一个div容器，然后在该容器中插入html滑块。 但是我不知道如何才能做到这一点

Answer 1

您需要更好地调整z-index css属性。 问题是全屏元素的z-index相对于其父级，并且其父级的z-index值低于同级元素的z-index ，因此这就是问题所在。 检查以下代码段：

 var app = angular.module('myApp', []); //myApp.directive('myDirective', function() {}); //myApp.factory('myService', function() {}); app.controller('MyCtrl', function($scope) { $scope.currentPageNo = 1; $scope.nextPage = function() { $scope.currentPageNo++; } }) 

 .fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; /*<------has the highest property*/ } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='myApp' ng-controller="MyCtrl"> <div style="background : #f00; margin:10px; position:relative; z-index : 1"> <!----------------------------------------------check above--^^^^^^^^^^^--> Parent sibling Content <br/>Parent sibling Content <br/> </div> <div style="background : #4CAF50;margin:10px; position:relative; z-index :2"> <!-----------------------------------------------check above--^^^^^^^^^^^--> Parent Content <br/>Parent Content <br/> <div id="slide" ng-class='{fullscreen:isFullScreen}' style="background : #FFEB3B;padding: 20px; margin:10px;"> content of page {{currentPageNo}} <div class="control"> <button ng-click="nextPage();">Next Page</button> <button ng-click="isFullScreen = !isFullScreen;">Toggle Full Screen</button> </div> </div> Parent Content <br/> </div> </div>