Angular_Directive.Txt中包含哪些高级指令用法？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1201个文字，预计阅读时间需要5分钟。
Angular自定义指令：使用select元素，设置select的显示值为item.description，绑定的值为item.name，绑定到descName上。使用ng-class：ng-class={ 'disableSelect': item.ips[1].isSelected || item.ips[2].isSelected }。
Angular自定义指令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:
*
* 示例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 || '…');
};
});
/**
* 警告框指令基本使用
*
{{confirmCtrl.title}}—{{confirmCtrl.headerHint}}
\ \ {{confirmCtrl.msg}} \ {{item}} \ \ \本文共计1201个文字，预计阅读时间需要5分钟。
Angular自定义指令：使用select元素，设置select的显示值为item.description，绑定的值为item.name，绑定到descName上。使用ng-class：ng-class={ 'disableSelect': item.ips[1].isSelected || item.ips[2].isSelected }。
Angular自定义指令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:
*
* 示例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 || '…');
};
});
/**
* 警告框指令基本使用
*