Angular_Directive.Txt

1、select元素：
    
    /**设置select的展示值为item.description,绑定的值为item.name,绑定到descName上*/

2、ng-class使用：
    ng-class="{'disableSelect':item.ips[1].isSelected||item.ips[2].isSelected}"
    ng-class="{true:'fa-check-square-o',false:'fa-square-o'}[item.ips[0].isSelected]"

3、ng-style指令：
    ng-style="modalBodyStyle"
    modalBodyStyle={"padding-left":" 0px","padding-right": "0px"," padding-bottom": "0px","padding-top":" 0px","height":"80px"}

4、自定义指令
/**
 * 使用：引入该JS,再angular.module('..',['sfDirective'])即可
*/
var _sfDirective = angular.module('sfDirective',[]);
//遮盖层简单指令封装
/**
 * 示例1:
 
 *     Cover Open
 * 示例2:
 
 *     $scope.coverAttr = {
 *     text: '全局隐藏测试',
 *     isShow: false,
 *     callback: function (ele) {//点击遮盖层的回调函数
 *     console.log(ele);
 *     $scope.coverAttr.close();//关闭遮盖参，用在方法里面，下同
 *   }
 */
_sfDirective.directive('sfCover',[function(){
    return {
        restrict:'EA',
        replace:true,
        template: '
 
  \
                
  
   \ 
   {{cover.text}}\ 
  
 ',
        scope: {
            cover: '=',
        },
        link:function(scope,element,attr,reController){
            scope.cover = scope.cover || {};
            if(!!scope.cover.isShow){
                element.css("display","inline");
            }else{
                element.css("display","none");
            }
            //关闭遮盖模块
            scope.cover.close = function () {
                element.css("display","none");
            };
            //打开遮盖模块
            scope.cover.open = function () {
                element.css("display","inline");
            }
            //添加遮盖参的点击回调函数
            element.on('click',function () {
                if(typeof scope.cover.callback === "function"){
                    scope.cover.callback(element);
                }
            });
        }
    };
}]);
/**
 使用方式：{{some_text | cut:100:true:'...'}}
 或者：ng-bind="some_text|cut:100:true:'...'"
 参数:
 长度 (整数) - 要保留的最大字数
 切字方式 (布尔) - 如果是 true，只切单字
 后辍 (字符串，默认：'…') - 接在字词的后面
 */
_sfDirective.filter('cut', function() {
    return function(value,max,wordwise, tail) {
        if (!value)
            return '';
        max = parseInt(max, 10);
        if (!max)
            return value;
        if (value.length <= max)
            return value;
        value = value.substr(0, max);
        if (wordwise) {
            var lastSpace = value.lastIndexOf(' ');
            if (lastSpace != -1) {
                value = value.substr(0, lastSpace);
            }
        }
        return value + (tail || '…');
    };
});

/**
 * 警告框指令基本使用
 * 
 
 * $scope.alertCtrl = {
 *   msg:'警告框一',//警告框提示信息
 *   type:1,//[1-4或'success/info/waring/danger'，默认1]
 *   timeout:5//几秒钟自动消失，默认不消失
 * }
 * $scope.alertCtrl.open();//开启警告窗,用在方法里面，下同
 * $scope.alertCtrl.close();//关闭警告窗
 *
 */
_sfDirective.directive('sfAlert',['$timeout',function($timeout){
    return {
        restrict:'EA',
        replace:true,
        template: '
 
  \
                    
  
   \ ×
   \ \ {{alertCtrl.msg}}
  
 ',
        scope: {
            alertCtrl:'=',
        },
        link:function(scope,element){
            scope.alertCtrl = scope.alertCtrl || {};
            var timeout;
            scope.open = function () {
                element.css("display","inline");
                timeout && $timeout.cancel(timeout);
                timeout = /^[-+]?\d*$/.test(scope.alertCtrl.timeout) && $timeout(function() {
                        scope.close();
                    }, scope.alertCtrl.timeout*1000);
            }
            scope.close = function () {
                element.css("display","none");
                scope.alertCtrl.isOpen = false;
                scope.alertCtrl.msg = null;
            }

            function setNewClass(type) {
                if(type === 1 || angular.equals("success",type)){
                    element.find('div').removeClass('alert-info');
                    element.find('div').removeClass('alert-warning');
                    element.find('div').removeClass('alert-danger');
                    element.find('div').addClass('alert-success');
                }else if((type === 2 || angular.equals("info",type))){
                    element.find('div').removeClass('alert-success');
                    element.find('div').removeClass('alert-warning');
                    element.find('div').removeClass('alert-danger');
                    element.find('div').addClass('alert-info');
                }else if((type === 3 || angular.equals("warning",type))){
                    element.find('div').removeClass('alert-success');
                    element.find('div').removeClass('alert-info');
                    element.find('div').removeClass('alert-danger');
                    element.find('div').addClass('alert-warning')
                }else{
                    element.find('div').removeClass('alert-info');
                    element.find('div').removeClass('alert-warning');
                    element.find('div').removeClass('alert-success');
                    element.find('div').addClass('alert-danger')
                }
            }
            var watchOpen = scope.$watch('alertCtrl.msg',function (oldValue,newValue) {
                initAlert(function () {
                    if(scope.alertCtrl.msg){
                        setNewClass(scope.alertCtrl.type)
                        scope.open();
                    }
                });

            });

            function initAlert(callback) {
                scope.alertCtrl.timeout = scope.alertCtrl.timeout || 5;
                scope.alertCtrl.open = function () {
                    element.css("display","inline");
                    timeout && $timeout.cancel(timeout);
                    timeout = /^[-+]?\d*$/.test(scope.alertCtrl.timeout) && $timeout(function() {
                            scope.close();
                        }, scope.alertCtrl.timeout*1000);
                }
                scope.alertCtrl.close = function () {
                    element.css("display","none");
                    scope.alertCtrl.isOpen = false;
                    scope.alertCtrl.msg = null;
                    //console.log('close',scope.alertCtrl);
                };
                typeof callback === "function"&&callback();
            }

            scope.$on(
                "$destroy",
                function() {
                    watchOpen();
                }
            );
        }
    };
}]);
/**
 * 
 
 * 开启确认框
 * $scope.confirmCtrl = {
 *    title:'确认提示',
 *    msg:'您确定要删除它吗？',
 *    isOk:function () {
 *        console.log('你选择了确定');
 *        $scope.confirmCtrl.close();//关闭提示框
 *    },
 *    cancel:function () {
 *        console.log('你选择了取消');
 *    },
 *    showCancel:true,//是否显示取消按钮，默认显示
 *    showX:true,//是否显示‘X’图标,默认显示
 *    headerHint:''//额外头部提示信息
 *    footerHint：''//底部额外提示信息
 *    close:function //关闭模态框
 *
 *}
 */
_sfDirective.directive('sfConfirm',['$timeout',function($timeout){
    return {
        restrict:'EA',
        replace:true,
        template:'
 
  \
                    
  
   \ 
   
    \ 
    
     \ 
     
      \ 
      ×\ 
      
{{confirmCtrl.title}}—{{confirmCtrl.headerHint}}
     \ 
     
      \ 
      
       {{confirmCtrl.msg}}
      \ 
      
       {{item}}
      \ 
     \ 
     
      \ 
      
       *{{confirmCtrl.footerHint}}
      \ 
      取消\ 
      确定\ 
     \ 
    \ 
   \ 
  \
                    \
                    
 ',
        scope: {
            confirmCtrl:'=',
        },
        link:function(scope,element,attr,reController){
            scope.confirmCtrl = scope.confirmCtrl || {};
            scope.modal = {
                isShow : false,
                style:{'display':'none'},
                close:function (cb) {
                    this.style = {'display':'none'}
                    this.isShow = false;
                    scope.confirmCtrl.msg = null;
                    typeof cb === "function" && cb();
                },
                open:function () {
                    this.style = {'display':'block'};
                    this.isShow = true;
                }
            }
            scope.isArray = function () {
                return angular.isArray(scope.confirmCtrl.msg);
            }
            var watch = scope.$watch('confirmCtrl.msg',function (newValue) {
                if(newValue){
                    scope.init(function () {
                        scope.modal.open();
                    });
                }
            });
            scope.init = function (callback) {
                scope.confirmCtrl.showX = typeof scope.confirmCtrl.showX === 'undefined'|| scope.confirmCtrl.showX;
                scope.confirmCtrl.showCancel = typeof scope.confirmCtrl.showCancel === 'undefined'|| scope.confirmCtrl.showCancel;
                scope.confirmCtrl.close = function () {
                    scope.modal.close();
                };
                scope.confirmCtrl.open = function () {
                    scope.modal.open();
                };
                typeof callback === 'function' && callback();
            }
            scope.$on(
                "$destroy",
                function() {
                    watch();
                }
            );
        }
    };
}]);
//{{someNumber | percentage:2}}//保留两位小数-->75.02%
_sfDirective.filter('percentage', ['$filter', function($filter) {
    return function(input, decimals) {
        return $filter('number')(input*100, decimals)+'%';
    };
}]);