/** * Created by Administrator on 2019/2/27 0027. */ frameworkModule.directive('appMultiSelect', ['$log', function ($log) { 'use strict'; $log.debug('appMultiSelect.ctor()...'); return { restrict: 'E', templateUrl: '/app/framework/app-multi-select/app-multi-select.html' + '?_=' + Math.random(), replace: true, scope: { thisOptionMap: "=", thisSelected: "=", thisCallback: "=", thisOptionType: "@", thisDefaultChecked: "=" }, controller: 'appMultiSelectController', link:function ($scope, $element, $attr, $ctrl) { // $scope.optionKeys = $ctrl.optionKeys; // $scope.optionValues = $ctrl.optionValues; // $scope.optionType = $ctrl.optionType; // $scope.defaultChecked = $ctrl.defaultChecked; // $scope.selected = $ctrl.selected; // $scope.callback = $ctrl.callback; var thatInput = $element.find(".for-fake-input"); var inputLayout = $element.find(".select-simulator"); var optionMenu = $element.find(".select-simulator-option-menu"); layout(); runDefaultChecked(); $scope.showMenu = showMenu; // 显示下拉框 $scope.checksOption = checksOption; // 选择多选框时的事件 $scope.confirmSelected = confirmSelected; // 最后赋值 $scope.clearInput = clearInput; // 清空事件 var intervalId = null; // 存储监听器ID,用于激活和关闭 $scope.activeWatcher = activeWatcher; // 激活监听器 $scope.closeWatcher = closeWatcher; // 关闭监听器 function runDefaultChecked(){ if($scope.defaultChecked.length){ // 一般defaultChecked就是optionMap的下表数组 $scope.optionKeys.forEach(function (key) { var defaultLen = $scope.defaultChecked.length; while(defaultLen--){ if($scope.defaultChecked[defaultLen] == $scope.optionMap[key]){ $scope.checkedKeys.push(key); $scope.checkedValues.push($scope.optionMap[key]); break; } } }); $scope.selected = $scope.checkedValues.join(","); } } function showMenu() { $scope.showOptionMenu = true; layout(); activeWatcher(); } function layout(){ var $topContainer = inputLayout.parent(); var paddingTopValue = parseInt($topContainer.css("padding")); inputLayout.css({ // paddingTop:paddingTopValue, height:$topContainer.height() - 1 //1px是容差 }); optionMenu.css({ top: $topContainer.innerHeight() + 3,//3px是容差 left: '15px', // 当前的15px是针对atms项目做的特殊处理,等当前项目的整个结构明晰之后再做调整 width: inputLayout.innerWidth() }); } var timeMark = null; function checksOption() { var curTime = new Date().getTime(); thatInput.focus(); // 创建mark对比,主要为了防止出现连续双击的情况 // 至于为什么会出现连续双击的情况,实在无从知晓 if (!timeMark || (curTime - timeMark >= 100)) { timeMark = curTime; confirmSelected(true); } } function activeWatcher() { closeWatcher(); intervalId = setInterval(function () { if (thatInput[0] !== document.activeElement) { $scope.$apply(function () { $scope.showOptionMenu = false; thatInput.blur(); closeWatcher(); }); } }, 133); } function closeWatcher() { clearInterval(intervalId); } function confirmSelected(operation) { // TODO 关键赋值操作 setTimeout(function () { $scope.checkedValues.length = 0; $scope.checkedKeys.length = 0; $scope.selected = ""; var options = $element.find("input[name='simulatorOptionMenu']"); options.each(function (index, item) { // operation:false => 清空选项 if (!operation) item.checked = false; else { if (item.checked) { $scope.checkedValues.push(item.value); $scope.checkedKeys.push(item.getAttribute('data-key')); } } }); // 最后只会返回key $scope.selected = $scope.optionType === "radio" ? $scope.checkedValues.join("") : $scope.checkedValues.join(","); $scope.callback($scope.checkedKeys,$scope.checkedValues); $scope.$apply(); }, 33); } function clearInput() { if ($scope.selected) { $scope.checkedValues.length = 0; $scope.checkedKeys.length = 0; $scope.selected = ""; // confirmSelected(false); } else { // 如果弹出下拉菜单时,当前输入框内容为空,就直接关闭下拉菜单 $scope.showOptionMenu = false; closeWatcher(); } } } }; } ]);