AngularJs 第一个自定义指令编写

时间 2019-12-09

原文原文链接

公司在作一个OA系统，包括移动端（从微信企业号进入OA系统），电脑端。 javascript

电脑端仍是用的传统的easyui作界面，asp.net mvc做为服务端。这个技术已经很成熟了配合权限框架很快就能开发出来。可是手机端以前团队也没有什么经验，我以前作过一个jqureymobile的项目，可是这个框架实在是太卡了，直接pass掉。刚好以前有自学一点点angularjs 因此我就推荐手机端的项目使用angularjs来开发，一来团队能够学习一些新技术跟上潮流，二来单页程序很适合咱们目前的这个小项目，三是咱们之后打算用phonegap直接打包webapp。好吧优势这么多那就开工吧（咱们用的是1.5版本，2.0国内还比较少）。html

因为团队以前没有接触过这个框架，因此大概花了3天时间来学习（正常开发任务仍是有，相对减小），可想而知以angularjs学习曲线咱们的成果不会好到哪里去，项目不等人，前端

angularjs确实很不错给前端带来不少新的概念：mvc 模块化单页依赖注入指令等。首先咱们遇到的问题是怎么团队开发，不可能你们都读写一个js文件吧，因而采用第三方的oclazyload.js来动态加载js和模板，路由采用angular-ui-router，其次咱们须要一款手机端的ui来配合angularjs，咱们选用了淘宝的sui。一切准备好了，那就开始吧！java

进入正题，个人第一个angularjs的指令设计，需求以下：angularjs

1.OA填完单以后，须要选择审核人。（这个比较次了，正规的OA是不须要本身选择审核人的，可是咱们是简单版的，何况大名鼎鼎的阿里巴巴钉钉OA也是这么设计的）。web

2.作成通用组件。微信

需求就这些了，那么直接上结果看看：mvc

1.主页面app

2.审批页面框架

3.用车申请

4.选人指令

以上顺便介绍了一下个人OA系统，那么下边再看看最终作出来的选审核人的指令：

好吧这个功能基本是钉钉的翻版。那么我如何来设计这个指令的呢，首先，弹出框这些ui都是来自于sui的ui插件，我作的事情就是用angularjs的指令来封装ui和一些逻辑，最终达到的通用的目标。上代码：

  1 /*
  2 *用于选择部门及用户
  3 *刘功葵 2016-4-9
  4 *
  5 */
  6 var departUser = angular.module("ktfOA");
     //第一个指令，弹出部门和人员选择框
  7 departUser.directive("departpopup", function ($http) {
  8     return {
  9         restrict: 'AECM',//<!-- departpopup -->
 10         //replace: true,
 11         transclude: true,
 12         scope: {
 13             pop: '@',//部门弹出框的id，为了让同一个页面多吃使用指令时，不出现重复ID
 14             peng: '@',//人员弹出框id
 15             selects: '=', //经过=绑定最终的选择结果，并传递到外层的controller
 16             users: '=',
 17             dowork: "&" //在选择用户时执行的方法   
 18         },
 19 
 20         templateUrl: '/Areas/Phone/Directive/DepartUser/DepartUser.html',
 21         controller: function ($scope) {
 22             this.open = function () {
 23                 $.popup('#' + $scope.pop);
 24             }
 25 
 26         },
 27         link: function (scope) {
 28             scope.pop = scope.pop || "pop";
 29             scope.peng = scope.peng || "peng";
 30             scope.$emit('ngPageFinished'); //$emit 给父scope返回一个值 父scope能够监控这个值 而后执行一些代码 至关于事件传播
 31             $http.post("/Phone/BusinessTravel/GetApiDepartList").success(function (msg) {
 32                 scope.departList = msg;
 33             })
 34             /*选择部门事件*/
 35             scope.selectDepart = function (departId) {
 36                 $.popup('#' + scope.peng);
 37                 scope.formJson = { 'departId': departId }
 38                 $http.post("/Phone/BusinessTravel/GetAipAdminUserList", scope.formJson).success(function (msg) {
 39                     scope.adminUserList = msg;
 40                 })
 41             }
 42             scope.selects = [];
 43             /*选择用户事件*/
 44             scope.selectUser = function () {
 45               
 46                 scope.noPic = true;
 47                 if (this.itemUsr.AbsoluteImgSrc == "" || this.itemUsr.AbsoluteImgSrc == undefined) {
 48 
 49                     this.itemUsr.AbsoluteImgSrc = "/Images/UserHeadPic/default.jpg";
 50                 }
 51                 for (var i = 0; i < scope.selects.length; i++) {
 52                     if (scope.selects[i].UserNo == this.itemUsr.UserNo) {
 53                         $.alert('用户已选过，不能重复！');
 54                         return;
 55                     }
 56                 }
 57                 scope.selects.push(this.itemUsr);
 58                 scope.users += this.itemUsr.UserNo + ",";
 59                 $.closeModal('#' + scope.peng);
 60                 $.closeModal('#' + scope.pop);
 61 
 62                 if (scope.dowork != undefined) {
 63                     scope.dowork();
 64                 }
 65 
 66             }
 67         }
 68 
 69     };
 70 
 71 
 72 })
 73 
 74 
 75 
 76 //第二个指令，依赖于第一个指令，用于显示最终的选择结果。
 77 departUser.directive("userselect", function ($http) {
 78     return {
 79         restrict: 'AECM',//<!-- departpopup -->
 80         replace: true,
 81         require: '^?departpopup', //此处是指依赖上面一个指令
 82         scope: {
 83             selects: "=",
 84             users: "="
 85         },
 86         template: ' <div> <div ng-click="delUser()" style="float:left;position:relative" ng-repeat="user in selects"><img style="border-radius:50%; height:56px;width:56px; overflow:hidden;" src="{{user.AbsoluteImgSrc}}" /><span style="position:absolute;left:7px;top:19px;font-size:small;color:white;text-align:center;width:40px;height:20px;" >{{user.UserName}}</span><span style="float:right;margin-top:8px;">...</span></div> <div style="float:left;margin-top:8px;"><a ng-click="Open()" class="open-about"><i class="fa fa-plus-circle fa-2x" style="color:#bab7b7"></i></a></div></div>',
 87         link: function (scope, element, attrs, departpopupController) {
 88             //$(".datetime-pickerStart").datetimePicker({});
 89             //$(".datetime-pickerEnd").datetimePicker({}); 
 90             scope.Open = function () {
 91                 departpopupController.open();
 92 
 93             }
 94 
 95             //删除选择的用户
 96             scope.delUser = function () {
 97 
 98                 var userNo = this.user.UserNo;
 99 
100                 for (var i = 0; i < scope.selects.length; i++) {
101                     if (scope.selects[i].UserNo == userNo) {
102                         scope.selects.splice(i, 1);
103                         break;
104                     }
105                 }
106                 scope.users = "";
107                 for (var i = 0; i < scope.selects.length; i++) {
108                     scope.users += scope.selects[i].UserNo + ",";
109                 }
110 
111             }
112         }
113 
114     };
115 
116 
117 })

2.模版页面

<div> 
    <div class="popup" id="{{pop}}">
        <header  class="bar bar-nav">
            <a class="icon icon-left pull-left close-popup"></a>
        </header>
        <div class="bar bar-header-secondary" style="position:relative">
            <div class="searchbar">
                <a ng-click="abc()" class="searchbar-cancel">取消</a>
                <div class="search-input">
                    <label class="icon icon-search" for="search"></label>
                    <input type="search"  id='search' placeholder='输入关键字...' />
                </div>
            </div>
        </div>
        <div class="list-block contacts-block">
            <div class="list-group">
                <ul>
                    <li ng-repeat="item in departList track by $index" class="open-services" ng-click="selectDepart(item.DepartID)" departid="{{item.DepartID}}">
                        <div class="item-content item-link">
                            <div class="item-inner">
                                <div class="item-title">
                                    <span style="color:#c6c4c4">{{item.TreeText}}</span>&nbsp;&nbsp;{{item.DepartName}}
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
        <div class="popup" id="{{peng}}">
            <header class="bar bar-nav">
                <a class="icon icon-left pull-left close-popup"></a>
            </header>
            <div class="bar bar-header-secondary" style="position:relative">
                <div class="searchbar">
                    <a class="searchbar-cancel">取消</a>
                    <div class="search-input">
                        <label class="icon icon-search" for="search"></label>
                        <input type="search" id='search' placeholder='输入关键字...' />
                    </div>
                </div>
            </div>
            <div class="list-block contacts-block">
                <div class="list-group">
                    <ul ng-repeat="itemUsr in adminUserList track by $index">
                        <li ng-click="selectUser()" userno="{{itemUsr.UserNo}}" username="{{itemUsr.UserName}}">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">
                                        <span style="color:#c6c4c4">{{itemUsr.UserNo}}</span>&nbsp;&nbsp;{{itemUsr.UserName}}
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    <div ng-transclude></div>
    </div>

DepartUser.html

3.在车辆申请页面的使用

<!--
/************************************************************************/
/*
 * 建立人：向高
 * 建立日期：2016-04-01
 * 文件描述：车辆申请表单页面
 */
/************************************************************************/
-->
<div ng-controller="CarApply">

    <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left" ui-sref="Index">
            <span class="icon icon-left"></span>
            返回
        </a>
        <h1 class='title'>用车申请</h1>
    </header>
    <departpopup selects="selects" users="users" pop="pop" peng="peng1">

        <div class="content" style="top:0.9rem">

            <div class="list-block">
                <ng-form name="CarForm" novalidate>
                    <!--ng-submit="save(CarForm.$valid)"-->
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">用车事由</div>
                                    <div class="item-input">
                                        <textarea required name="AskReason" ng-model='Apply.AskReason' style="font-size:14px;" placeholder="请输入(必填)"></textarea>
                                        <!--<input type="text">-->
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-email"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">始发地点</div>
                                    <div class="item-input">
                                        <input type="text" required  name="LevelPlace" ng-model="Apply.LevelPlace" style="font-size:14px;" placeholder="请输入（必填）">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">返回地点</div>
                                    <div class="item-input">
                                        <input type="text" required name="EndPlace" ng-model="Apply.EndPlace" style="font-size:14px;" placeholder="请输入（必填）">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">用车时间</div>
                                    <div class="item-input">
                                        <input type="text" name="LeaveTimeFrom" required ng-model="Apply.LeaveTimeFrom" id="datetime-pickerStart" style="font-size:14px;" placeholder="请输入（必填）">
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">返程时间</div>
                                    <div class="item-input">
                                        <input type="text" name="LeaveTimeTo" required ng-model="Apply.LeaveTimeTo" id="datetime-pickerEnd" style="font-size:14px;" placeholder="请输入（必填）">
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li ng-repeat="cars in cars" on-finish-render-filters>
                            <div class="item-content" style="top:0.7rem;padding-left:20px;background:#f3f2f2;line-height:55px;font-size:14px;height:40px">
                                <div style="width:85px;float:left"> <span>车辆明细({{$index+1}})</span></div>
                                <div style="width:70px;float:right;padding-right:15px;" ng-if="$index+1>1"><span><a href="javascript:void(0)" ng-click="deleteCar()">删除</a></span></div>
                            </div>
                            <!--<div class="content-block-title xingcheng" style="margin-left:30px;font-size:small">车辆明细({{$index+1}})</div>-->
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">车辆选择</div>
                                    <div class="item-input">
                                        <input type="text" class='picker' required name="BusInfo" ng-model="cars.BusInfo" style="font-size:14px;" placeholder="请选择（必选）">
                                    </div>
                                </div>
                            </div>

                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">数量</div>
                                    <div class="item-input">
                                        <input type="text" ng-change="getCarNum()" required name="AskNum" ng-model="cars.AskNum" required style="font-size:14px;" placeholder="请输入（必填）">
                                    </div>
                                </div>
                            </div>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">其余要求</div>
                                    <div class="item-input">
                                        <input type="text" name="Remark" ng-model="cars.Remark" style="font-size:14px;" placeholder="请输入">
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li><div class="content-block-title xingcheng" style="margin-left:30px;font-size:small">如需多种车型,请点击“添加车辆”</div></li>
                        <li style="text-align:center;"><a style="cursor:pointer" ng-click="AddMore()"><i class="fa fa-plus" style="color:blue"></i>添加车辆</a></li>
                        <li><div class="item-title label inputSize" style="margin-left:30px;">总数量（辆）：{{carnum}}</div></li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">备注</div>
                                    <div class="item-input">
                                        <textarea  name="Remark" ng-model='Apply.Remark' style="font-size:14px;" placeholder="请输入"></textarea>

                                    </div>
                                </div>
                            </div>
                        </li>

                        <li style="padding-left:30px; height:110px;">
                            <div><span>审批人</span><span style="font-size:small;color:#999999">（点击头像可删除）</span></div>
                            <userselect selects="selects" users="users"></userselect>
                        </li>
                    </ul>
                </ng-form>
            </div>
            <div class="content-block">
                <div class="row">
                    <div class="col-50"><a href="#" class="button button-big button-fill button-danger">取消</a></div>
                    <div class="col-50"><a ng-class="{true:'button button-big button-fill button-success',false:'button button-big button-fill button-success disabled'}[CarForm.$valid]" ng-click="save(CarForm.$valid)" >提交</a></div>
                    <!--<a ng-class="{true:'button button-big button-fill button-success',false:'button button-big button-fill button-success disabled'}[CarForm.$valid]"  ng-click="save(CarForm.$valid)" class="button button-big button-fill button-success">提交</a>-->
                </div>
            </div>
        </div>
    </departpopup>
</div>

CarApply.html

4.车辆申请页面的Controller

//var CarApplyModule = angular.module("CarApplyModule", ['ngAnimate']);

/************************************************************************/
/*
 * 建立人：向高
 * 建立日期：2016-04-01
 * 文件描述：车辆申请控制器
 */
/************************************************************************/

 
var CarApplyModule = angular.module("ktfOA");
CarApplyModule.controller("CarApply", function ($scope, $http, CalcService, $state, $stateParams) {
    
    var selectCars = []; //保存根据用车时间 获取可选车辆
    $scope.cars = [{ BusInfo: "", AskNum: 1, Remark: "" }]; //用于初始化repeater
    $scope.carnum = parseInt($scope.cars[0].AskNum);
    $scope.users = "";//审核人
    $scope.selects = []; //选人控件 传回来的选择用户集合
    //$scope.selectCars = []; //保存根据用车时间 获取可选车辆
    $scope.Apply = {
        AskReason: "", LevelPlace: "", EndPlace: "",
        LeaveTimeFrom: "", LeaveTimeTo: "", Remark: "",
        Detail: $scope.cars, users: ""

    };


    $scope.getCarNum = function () {
        var num = 0;
        for (var i = 0; i < $scope.cars.length; i++) {

            if ($scope.cars[i].AskNum != undefined) {
                num += parseInt($scope.cars[i].AskNum);
            }
        }
        $scope.carnum = num;
    }


    //提交表单数据
    $scope.save = function () {
        if ($scope.selects.length <= 0)
        {
            $.alert("请选择审核人！");
            return;
        }
        //获取审核人
        var users = "";
        for (var i = 0; i < $scope.selects.length; i++) {
            users += $scope.selects[i].UserNo + ",";
        }
       
        $scope.Apply.users = users;
        $http({ method: 'POST', url: '/phone/CarApply/SaveCarApply', data: JSON.stringify($scope.Apply) }).
         success(function (response) {
             if (response.status == 2) {

                 $.alert(response.msg);
             }
             else if (response.status == 1) {
                 $.alert(response.msg, function () { $state.go("AuditHome"); }); 
             }
         });
    }

    //添加车辆
    $scope.AddMore = function () {
        $scope.cars.push({ BusInfo: "", AskNum: "", Remark: "" });
    }

    //删除车
    $scope.deleteCar = function () {
        var index = this.$index;
        $scope.cars.splice(index,1);
    }

    //选取用车时间时 获取车辆信息
    $scope.GetCars = function () {

        if ($scope.Apply.LeaveTimeFrom != "") {
            $http({ method: 'POST', url: '/phone/CarApply/GetCars', data: { Stime: $scope.Apply.LeaveTimeFrom } }).success(function (data) {

                //var selects = [];
                if (selectCars.length > 0) {
                    selectCars.splice(0, selectCars.length);
                }
                for (var i = 0; i < data.length; i++) {
                    selectCars.push(data[i].BusName + data[i].BusType + "(" + data[i].BusSiteCount + "座)" + "  可用数量" + data[i].CarNum);
                }

                $(".picker").picker("setValue", selectCars);

            })
        }
    }

    $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {

        //初始化sui的选择器控件
        $(".picker").picker({
            toolbarTemplate: '<header class="bar bar-nav">\<button class="button button-link pull-left">按钮</button>\<button class="button button-link pull-right close-picker">肯定</button>\<h1 class="title">车辆信息</h1>\</header>',
            cols: [
              {
                  textAlign: 'center',
                  values: selectCars
                  //values: ['奥迪A6L（5座）', '丰田商务车（7座）', '丰田卡罗拉（5座）', '大众帕萨特（5座）', '宇通大巴（47座）', '宇通中巴（24座）', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
              }
            ]

        });

    });

    $scope.$on('ngPageFinished', function (ngPageFinishedEvent) {
        $("#datetime-pickerStart").datetimePicker({
            onClose: function () {
                $scope.GetCars();
            }
        });
        $("#datetime-pickerEnd").datetimePicker({});
    })


    $scope.getNum = function () {
        var num = 0;
        for (var i = 0; i < $scope.cars.length; i++) {
            num += $scope.cars[i].AskNum;
        }
        return num;
    }


})


CarApplyModule.directive('onFinishRenderFilters', function ($timeout) {
    return {
        restrict: 'A', //匹配模式：A(属性方式)E（元素）M（注释  <!-- directive:xx -->）C(class方式 class = xx)，angular 默认使用A
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    };
});

CarApplyController

简单的使用方式：

</departpopup>

注意两个指令是嵌套的关系。selects和users等就是外部controller和指令之间的绑定，用于传递数据。

以上就是个人第一个angularjs指令。下边谈谈遇到的坑：

首先我只用一个指令来搞定，可是不行，由于sui必须将弹出框放在body元素里边，不能放在li元素，不然就弹不出来。我想到这是样式的问题，因而手动来更改sui弹出框的定位样式，可是这不是一个好办法，电脑上还能够，可是手机上会出现兼容问题。最后我想到能够用两个指令来写这个插件，外层的<departpopup>负责弹出框（放在body标签里边），内部的<userselect>用于显示最终的结果。这会有涉及两个指令之间的数据传递，和相互调用。

大概就这些，我也是刚开始学习，路过的大牛们请不惜赐教。感谢！