(function () {
|
'use strict';
|
angular
|
.module('core.directive', [])
|
.directive('ngReallyClick', ngReallyClick)
|
.directive('ngFocus', ngFocus)
|
|
|
.directive('fileModel', fileModel)
|
|
.directive('dropDown', dropDown)
|
.directive('dropDownByObject', dropDownByObject)
|
.directive('dropDownByObjectSecond', dropDownByObjectSecond)
|
|
;
|
|
|
function ngReallyClick() {
|
return {
|
restrict: 'A',
|
link: function (scope, element, attrs) {
|
element.bind('click', function () {
|
var message = attrs.ngReallyMessage;
|
if (message && confirm(message)) {
|
scope.$apply(attrs.ngReallyClick);
|
}
|
});
|
}
|
}
|
}
|
|
//焦点聚焦
|
function ngFocus($timeout, $parse) {
|
return {
|
|
restrict: 'A',
|
//scope: true, // optionally create a child scope
|
link: function (scope, element, attrs) {
|
var model = $parse(attrs.ngFocus);
|
scope.$watch(model, function (value) {
|
if (value === true) {
|
$timeout(function () {
|
element[0].focus();
|
});
|
}
|
});
|
// to address @blesh's comment, set attribute value to 'false'
|
// on blur event:
|
element.bind('blur', function () {
|
scope.$apply(model.assign(scope, false));
|
});
|
}
|
};
|
}
|
|
|
|
|
function fileModel($parse) {
|
return {
|
restrict: 'A',
|
link: function (scope, element, attrs, ngModel) {
|
var model = $parse(attrs.fileModel);
|
var modelSetter = model.assign;
|
element.bind('change', function (event) {
|
scope.$apply(function () {
|
modelSetter(scope, element[0].files[0]);
|
});
|
//附件预览
|
scope.file = (event.srcElement || event.target).files[0];
|
scope.getFile();
|
});
|
}
|
};
|
}
|
|
|
|
function dropDownByObject() {
|
return {
|
restrict: 'EA',
|
replace: true,
|
transclude: true,
|
scope: {
|
selecttitle: '=', //// 默认选中值
|
selectdata: '=',
|
ddlsize: '=',
|
lidata: '=lidata', //// 数据集如
|
|
clickChange: '&', //// 选项变化时事件
|
disabled: '@' //// 是否显示，支持表达式
|
},
|
//template: '<div class="ddl-sm" tabindex="-1" ng-blur="closeList($event)">'
|
template: '<div ng-class="{\'ddl-sm\':ddlsize==\'sm\',\'ddl-md\':ddlsize==\'md\',\'ddl-lg\':ddlsize==\'lg\'}" tabindex="-1" ng-blur="closeList($event)">'
|
+ '<div class="ddlTitle" ng-click="toggle($event)"><span ng-bind="selecttitle"></span><div class="ddlTitle-up"></div></div>'
|
+ '<ul ng-show="showMe">'
|
+ ' <li ng-repeat="data in lidata" ng-click="clickLi(data)">{{data.name}}</li>'
|
+ '</ul>'
|
+ '</div>',
|
link: function ($scope, $element, $attrs, $document) {
|
$scope.showMe = false;
|
$scope.disabled = true;
|
//列表是否打开的判断标志
|
//$scope.flag = { showList: false }; //在document上监听click函数
|
//$document.bind('click', function (event) {
|
// console.info("下拉框点击啦啦啦");
|
// console.info(event);
|
// //_closeList();//关闭下拉列表
|
// //$scope.$apply();//为了保证angular的数据同步
|
//});
|
/**
|
* 关闭列表函数
|
*/
|
//function _closeList() { $scope.flag.showList = false; }
|
|
$scope.toggle = function toggle(event) {
|
//$scope.showMe = !$scope.showMe;
|
event.stopImmediatePropagation();
|
if ($scope.showMe) { _closeList(); } else { $scope.showMe = true; }
|
};
|
|
$scope.clickLi = function clickLi(data_) {
|
$scope.selectdata = data_.value;
|
$scope.selecttitle = data_.name;
|
|
$scope.showMe = !$scope.showMe;
|
};
|
function _closeList() {
|
$scope.showMe = false;
|
}
|
|
$scope.closeList = function (event) {
|
event.stopPropagation();
|
_closeList();
|
}
|
$scope.$watch('selectdata', function (value) {
|
$scope.clickChange();
|
});
|
|
}
|
}
|
}
|
|
function dropDownByObjectSecond() {
|
return {
|
restrict: 'EA',
|
replace: true,
|
transclude: true,
|
scope: {
|
selecttitle: '=', //// 默认选中值
|
selectdata: '=',
|
ddlsize: '=',
|
lidata: '=lidata', //// 数据集如
|
|
clickChange: '&', //// 选项变化时事件
|
disabled: '@' //// 是否显示，支持表达式
|
},
|
template: '<div ng-class="{\'ddl-sm\':ddlsize==\'sm\',\'ddl-md\':ddlsize==\'md\',\'ddl-lg\':ddlsize==\'lg\'}" tabindex="-1" ng-blur="closeList($event)">'
|
+ '<div class="ddlTitle" ng-click="toggle($event)"><span ng-bind="selecttitle"></span><div class="ddlTitle-up"></div></div>'
|
+ '<ul ng-show="showMe">'
|
+ ' <li ng-repeat="data in lidata" ng-mousemove="moveOn(data.children)">{{data.name}}</li>'
|
+ '</ul>'
|
+ '<ul class="children-ul" ng-show="showMe&&showChildren" >'
|
+ ' <li ng-repeat="data in clidata" ng-click="clickLi(data)">{{data.name}}</li>'
|
+ '</ul>'
|
+ '</div>',
|
link: function ($scope, $element, $attrs, $document) {
|
$scope.showMe = false;
|
$scope.disabled = true;
|
$scope.showChildren = false;
|
$scope.clidata = [];
|
//列表是否打开的判断标志
|
//$scope.flag = { showList: false }; //在document上监听click函数
|
//$document.bind('click', function (event) {
|
// console.info("下拉框点击啦啦啦");
|
// console.info(event);
|
// //_closeList();//关闭下拉列表
|
// //$scope.$apply();//为了保证angular的数据同步
|
//});
|
/**
|
* 关闭列表函数
|
*/
|
//function _closeList() { $scope.flag.showList = false; }
|
|
$scope.toggle = function toggle(event) {
|
//$scope.showMe = !$scope.showMe;
|
event.stopImmediatePropagation();
|
if ($scope.showMe) { _closeList(); } else { $scope.showMe = true; }
|
};
|
|
$scope.clickLi = function clickLi(data_) {
|
$scope.selectdata = data_.value;
|
$scope.selecttitle = data_.name;
|
|
$scope.showMe = !$scope.showMe;
|
};
|
|
$scope.moveOn = function moveOn(data_) {
|
$scope.showChildren = true;
|
$scope.clidata = data_;
|
};
|
|
$scope.leave = function leave(data_) {
|
$scope.showChildren = false;
|
};
|
|
function _closeList() {
|
$scope.showMe = false;
|
}
|
|
$scope.closeList = function (event) {
|
event.stopPropagation();
|
_closeList();
|
}
|
$scope.$watch('selectdata', function (value) {
|
$scope.clickChange();
|
});
|
|
}
|
}
|
}
|
|
function dropDown() {
|
return {
|
restrict: 'EA',
|
replace: true,
|
transclude: true,
|
scope: {
|
pagesize: '=', //// 默认选中值
|
lidata: '=lidata', //// 数据集如['张三','李四','王五']
|
changePageSize: '&', //// 选项变化时事件
|
disabled: '@' //// 是否显示，支持表达式
|
},
|
|
template: '<div class="ddl-page" ng-show="disabled" >'
|
+ '<div class="ddlPageTitle" ng-click="toggle()"><span ng-bind="pagesize"></span><i class="fa fa-angle-down ddli"></i></div>'
|
+ '<ul ng-show="showMe">'
|
+ ' <li ng-repeat="data in lidata" style="font-size:18px;" ng-click="clickLi(data)">{{data}}</li>'
|
+ '</ul>'
|
+ '</div>',
|
link: function ($scope, $element, $attrs) {
|
|
$scope.showMe = false;
|
$scope.disabled = true;
|
|
$scope.toggle = function toggle() {
|
$scope.showMe = !$scope.showMe;
|
};
|
|
$scope.clickLi = function clickLi(data_) {
|
$scope.pagesize = data_;
|
$scope.showMe = !$scope.showMe;
|
};
|
|
$scope.$watch('pagesize', function (value) {
|
$scope.changePageSize();
|
});
|
|
}
|
}
|
}
|
|
|
//function dropDown() {
|
// return {
|
// restrict: 'EA',
|
// replace: true,
|
// transclude: true,
|
// scope: {
|
// selecttitle: '=', //// 默认选中值
|
// lidata: '=lidata', //// 数据集如['张三','李四','王五']
|
// clickChange: '&', //// 选项变化时事件
|
// disabled: '@' //// 是否显示，支持表达式
|
// },
|
// template:'<div class="ddl" ng-show="disabled">'
|
// +'<div class="ddlTitle" ng-click="toggle()"><span ng-bind="selecttitle"></span><i class="fa fa-angle-down ddli"></i></div>'
|
// +'<ul ng-show="showMe">'
|
// +' <li ng-repeat="data in lidata" ng-click="clickLi(data)">{{data}}</li>'
|
// +'</ul>'
|
// + '</div>',
|
// link: function ($scope, $element, $attrs) {
|
|
// $scope.showMe = false;
|
// $scope.disabled = true;
|
|
// $scope.toggle = function toggle() {
|
// $scope.showMe = !$scope.showMe;
|
// };
|
|
// $scope.clickLi = function clickLi(data_) {
|
// $scope.selecttitle=data_;
|
// $scope.showMe = !$scope.showMe;
|
// };
|
|
// $scope.$watch('selecttitle', function(value) {
|
// $scope.clickChange();
|
// });
|
|
// }
|
// }
|
//}
|
|
})();
|
