我必须模拟 slider 的功能,它有一些控件,例如 next/prev 按钮和切换全屏按钮。在 toogle 全屏上,我必须在拉伸(stretch)模式下显示 slider ,我已经使用 z-index 完成了此操作,但它不起作用,因为 slider 的父级的 z-index 低于其 sibling 的 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>
- 一种可能的解决方案是更改 slider 父级的 z-index 及其 sibling 使用 javascript。
- 其他可能的解决方案是在前面加上 主体中的 div 容器并在该容器中注入(inject) slider html。但是我 不知道我怎么能在 Angular 上做到这一点
最佳答案
您需要更好地调整 z-index
css 属性。问题是全屏元素的 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>
关于javascript - AngularJs 在模式中注入(inject)模板 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34850541/