AngularJs被用来开发单页面应用程序（SPA），利用AJAX调用配合页面的局部刷新，可以减少页面跳转，从而获得更好的用户体验。Angular的ngView及其对应的强大路由机制，是实现SPA应用的核心模块。本文所说的页面切换指的就是这个路由机制，即根据不同的url展示不同的视图。
前端开发中，为了对列表项进行快捷操作，有时就添个按钮来简单实现。但是，有时会发现按钮影响美观，甚至影响列表行的布局。稍在网上搜索无果，而写此仿苹果滑屏删除控件。
依赖项：angularJS、jQuery
测试浏览器：Chrome、IE11、手机浏览器
原先列表项代码：
rush:js;">
显示的内容
开发目标：
首先，要写个angular指令：
rush:js;">
myapp.directive('slideDelete',function() {
return {
restrict: 'AE',scope: {
text: "@",ondelete: "&"
},link: function (scope,element,attrs) {
var w = $(element).outerWidth ();//应显示的宽度
var h = $(element).outerHeight();//应显示的高度
//按钮宽度
var btn_w = 60;
//设计按钮：
scope.btn = $('
cope.text||'删除')+'
');
//改造行,用一个绝对定位div将内容包裹起来
$(element).contents().wrapAll('Box style="position:absolute;z-index:5999;left:0;top:0;width:'+w+'px;height:'+h+'px;background-color:#fff;">
');
//添加按钮：
$(element).css({overflow:"hidden",position:"relative","z-index":5999}).append(scope.btn)
//滑屏功能
.slideable({
getLeft: function(self){return self.children(":first-child").position().left;},setLeft: function(self,x){ self.children(":first-child").css({left: x<-btn_w && -btn_w || x<0 && x || 0});},onslide: function(self,x){
scope.open = x < -btn_w / 2;
self.css("z-index",scope.open && 6001 || 5999);
//背景，点击收起
var bk = $.fixedBackground(6000,scope.open);
scope.open && bk.data("self",self).click(function(){
var self = bk.data("self");
$.fixedBackground(6000,false);
self && self.css("z-index",5999).children(":first-child").animate({left: 0},100);
});
self.children(":first-child").animate({left: scope.open ? -btn_w : 0},100);
}
})
//按钮事件
scope.btn.click(function(){
scope.ondelete && scope.ondelete();
$.fixedBackground(6000,1).click();//关闭背景
});
}
};
});
再写个滑屏事件类，当然要兼容鼠标
