Angularjs 自定义指令 （下拉菜单）

为什么要自定义控件？html的select 不是可以用么？以前我就是这么想的，当我接到特殊需求时，需要我自己写一个下拉控件。

这个需求就是将图表横向放大，由于H5不能控制设备转向，所以我将图表通过css控制顺时针旋转90度。这时设备还是竖屏的，所以即使你将select空间旋转90度，当你点击下拉选项时，会发现选项是竖屏展示的。（不管是Android还是ios 均对h5的select 进行优化，即不在是网页那种显示方式，而是下方出现选项的弹框）这样就不合适了。需要你去写个select 组件了。

 

由于我使用的是Angularjs ，所以组件需要使用指定（directive） 来完成，

 1 angular.module('app')
 2     .directive('dropDown', [function () {
 3         return {
 4             restrict : 'EA',
 5             replace : true,
 6             transclude : true,
 7             scope : {
 8                 selecttitle : '=', //// 默认选中值
 9                 lidata:'=lidata',  //// 数据集如['张三','李四','王五']
10                 clickChange:'&',   //// 选项变化时事件
11                 disabled:'@'       //// 是否显示，支持表达式
12             },
13             template:'<div class="ddl" ng-show="disabled">'
14             +'<div class="ddlTitle" ng-click="toggle()"><span ng-bind="selecttitle"></span><i class="fa fa-angle-down ddli"></i></div>'
15             +'<ul ng-show="showMe">'
16             +' <li ng-repeat="data in lidata" ng-click="clickLi(\'{{data}}\')">{{data}}</li>'
17             +'</ul>'
18             +'</div>',
19             link: function ($scope, $element, $attrs) {
20 
21                 $scope.showMe = false;
22                 $scope.disabled = true;
23 
24                 $scope.toggle = function toggle() {
25                     $scope.showMe = !$scope.showMe;
26                 };
27 
28                 $scope.clickLi=function clickLi(data_){
29                     $scope.selecttitle=data_;
30                     $scope.showMe = !$scope.showMe;
31                 };
32 
33                 $scope.$watch('selecttitle', function(value) {
34                     $scope.clickChange();
35                 });
36 
37                     /*$scope.$watch( function() {
38                         return $scope.$eval($attrs.setNgAnimate, $scope);
39                     }, function(valnew, valold){
40                         $animate.enabled(!!valnew, $element);
41                     });*/
42             }
43         };
44     }]);

Angularjs 控制器代码

 1 app.controller('***Ctl',[function(){
 2 
 3     $scope.currentEnttiy={};
 4     $scope.currentMetric="";
 5     
 6 
 7     $scope.initPage = function() {
 8         ......
 9         $scope.changeSelect();
10     }
11 
12 
13     //// 下拉选项变化时触发
14     $scope.changeSelect=function(){
15           ......
16     }     
17    
18      $scope.initPage(); 
19 
20 }];

Html代码

 1 <html>
 2 <head>
 3      <title>hello jackical</title>
 4 </head>
 5 <body>
 6 
 7 <drop-down selecttitle="currentMetric" lidata="currentEnttiy.metricNameList" click-Change="changeSelect()"></drop-down>
 8 
 9 </body>
10 </html>

 

css 样式

 1  .ddl{
 2         position: relative;
 3         padding:2px;
 4         cursor: pointer;
 5         background-color: #FAFAFA;
 6         width:254px;
 7         float: left;
 8     }
 9     .ddlTitle{
10         height: 40px;
11         line-height: 35px;
12         padding: 2px;
13         padding-left: 5px;
14         padding-right: 5px;
15         border: solid #cccccc 1px;
16         font-size: 13px;
17     }
18     .ddlTitle span{
19         margin-right: 10px;
20         color: #58D0E1;
21         padding-left: 5px;
22     }
23     .ddl ul li{
24         list-style:none;
25         border-top: dotted #cccccc 1px;
26         line-height: 40px;
27         padding-left: 5px;
28     }
29     .ddl ul{
30         position:absolute;
31         top:40px;
32         width:250px;
33         left:2px;
34         border: solid #cccccc 1px;
35         z-index: 3;
36         background-color: white;
37         padding:2px;
38     }
39     .ddli{
40         font-size: 20px;
41         float: right;
42         margin-top: 5px;
43     }

 

以上为实现代码片段。

附效果图：

转载请注明出处：http://www.cnblogs.com/jackicalSong/

OK ，代码己贴完。

 

posted on 2016-08-31 09:38  我叫宋  阅读(3364)  评论(0)  编辑  收藏  举报

导航