关闭 Angular JS 上的滑动面板
close slide panel on angular js
请帮助修复脚本
http://jsfiddle.net/M4pXU/
当您单击红色字段时,将显示在面板上。
确定当您单击黄色区域时,我需要它是一个隐藏的面板。 因此,如果用户单击绿色字段,则不会发生任何反应
.html:
<div class="body" ng-app="moduleSlidePanel" ng-controller="controllerSlidePanel" ng-click="shoooooo = false">
<div class="wrap_news">
<div class="slide_panel" ng-class="{'showPanel':sho}" ng-click="sho = true">
<div class="slide_panel_inner">
qweeeeeeeeeeeeeeeeeeee eeety<br />
qweeeeeeeeeeeeeeeeeeee eeety<br />
qweeeeeeeeeeeeeeeeeeee eeety<br />
qweeeeeeeeeeeeeeeeeeee eeety<br />
qweeeeeeeeeeeeeeeeeeee eeety<br />
qweeeeeeeeeeeeeeeeeeee eeety<br />
</div>
</div>
</div>
</div>
.css:
.body{
height:100%;
background: yellow;
font: 14px helvetica, arial, sans-serif;
}
html, body, div, h1, h2, h3, h4, h5, h6, a, a img, p, ul, ol, li, span, fieldset , form, dl, dd, dt, table, tr, td, img{
border: none;
margin: 0;
outline: none;
padding: 0;
}
html{
height:100%;
}
body{
height:100%;
background: yellow;
font: 14px helvetica, arial, sans-serif;
}
/******************************************************************************************************************************* 2. fonts */
/****************************************************************************************************************************** 3. layout */
/******************************************************************************************************************************* 5.1 */
.wrap_news{
position: relative;
width: 100%;
margin: 0 auto;
height: 500px;
}
.wrap_news .slide_panel{
position: absolute;
left: -200px;
top: 100px;
background: red;
padding-right: 30px;
width: 200px;
overflow: hidden;
padding-right: 30px;
-webkit-transition: 1s linear all; /* Safari/Chrome */
-moz-transition: 1s linear all; /* Firefox */
-ms-transition: 1s linear all; /* IE10 */
-o-transition: 1s linear all; /* Opera */
transition: 1s linear all; /* Future Browsers */
}
.slide_panel_inner{
background: lime;
}
.wrap_news .slide_panel.showPanel{
left: 0;
right: auto;
}
您需要
的是停止click
事件的传播,如下所示:
$scope.show = function(e){
$scope.sho = true;
e.stopPropagation();
}
$scope.hide = function(){
$scope.sho = false;
}
工作: http://jsfiddle.net/cherniv/M4pXU/2/
相关文章:
- Angular JS IE9 Hashbang url rewriting
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- angular.js没有'无法在PhoneGap中处理视图标记
- Angular js-返回一个包含类似
- 如何使用 Angular JS 将数据保存在数据库中
- 将Angular js与taglib结合使用
- Angular JS Filter-通过3个复选框进行筛选
- vaadin:使用自定义布局集成angular js
- angular js密码强度显示问题
- 使用angular.js问题的JavaSpringREST服务
- 将复杂对象从angular js传递到web api,它总是返回404
- entre上的angular js阻止提交
- 根据Angular.JS上一次的内容禁用选择
- 如何在angular js中使用指令.不适用于我的情况,为什么
- 预期响应包含一个对象,但在angular js中得到一个数组错误
- angular.js:13424错误:[ng:areq]参数'fn'不是函数,getObject
- 使用Angular js-量角器e2e测试上传文件
- Angular.js延迟控制器初始化
- 如何在angular.js中动态应用自定义过滤器
- 谷歌地图/Angular JS:地图更新并不总是反映数据,并且可以't删除标记