当前位置: 首页>前端>正文

在angularJs中封装组件,全局调用

在angularJs中封装组件,全局调用

背景:

  • 在angularJs中,有时候,需要封装组件,公用的组件,方便多个模板调用添加,减少重复开发,提高效率。

思路:

  • 封装的组件,拥有自己独立的html和js,在项目中调用,需要先在index.html中引入该组件的JS,组件中的html和js添加需要实现的功能,然后,再需要引入的页面的html里面添加组件结构,js里面添加触发组件显示的标志位,以及需要传输的数据。

添加组件的内容

<ion-view view-title={{title}} style="background-color:#f6f5f5;height: 100vh;">
    <ion-content delegate-handle="contentScroll" style="margin-bottom: 100px;">
        <div class="clausesWrap-tbqr">
            <ul class="clauses-tbqr" >  
                <li  ng-repeat="item in readClauseList track by $index">
                    <div class="checkedImg-tbqr">
                        < img src="./img/26tracBack/selected.png" alt="">
                    </div>
                    <div class="flex1-tbqr">
                        <p class="listTitle-tbqr" ng-if="item.filetype == '2'">保险条款已悉知并理解</p >
                        <p class="listTitle-tbqr" ng-if="item.filetype == '3'">责任免除已知悉并理解</p >
                        <p class="listTitle-tbqr" ng-if="item.filetype == '4'">其他影响保单效力条款说明已知悉并理解</p >
                        <p class="listTitle-tbqr" ng-if="item.filetype == '5'">信息授权已知悉并理解</p >
                        <p class="listTitle-tbqr" style="margin: 0;" ng-if="isDieBlame == 1 && item.issame !=1 && item.bbrage >= 18">被保险人已同意投保并确认保险金额</p >
                        <p class="readTime-tbqr">阅读完成时间:{{item.endtime}}</p >
                    </div>
                </li>
                <li ng-show="insureTmpFlag != '1'">
                    <div class="checkedImg-tbqr">
                        < img src="./img/26tracBack/selected.png" alt="">
                    </div>
                    <div  class="flex1-tbqr">
                        <p class="listTitle-tbqr" >健康告知已知悉并理解</p >
                        <p class="readTime-tbqr">阅读完成时间:{{systime}}</p >
                    </div>
                </li>
                <li style="margin-top: 8px;line-height: 44px;" ng-show="bbrAgeSame">
                    <div class="checkedImg-tbqr">
                        < img src="./img/26tracBack/selected.png" alt="">
                    </div>
                    <div  class="flex1-tbqr">
                        <p class="listTitle-tbqr" style="margin: 0;" >被保险人已同意投保并确认保险金额</p > 
                    </div>
                </li>             
            </ul>
        </div>
        <div class="signNatureWrap-tbqr">
            <p class="titleGlobal-tbqr">投保人确认</p >
            <div class="flexWrap-tbqr">
                <span>
                    姓名
                </span>
                <span>{{tbrName}}</span>
            </div>
            <div class="flexWrap-tbqr">
                <div>
                    投保人签名
                </div>
                <a class="autoGraph-tbqr-tbqr flexWrap-tbqr"  href=" " ng-click="signNature('0','0')" style="border:none;">
                    <div class="nameImgWrap-tbqr">
                        < img id="nameImg-tbqr00" src="" />
                    </div>
                    <input type="hidden" name="signatureImg00" id="signatureImg00" />
                    <span class="autoGraph-tbqr plachoder-tbqr00">请点击此处完成签名</span>
                </ a>
            </div>
        </div>
        <div class="signNatureWrap-tbqr">
            <!-- 是否身故责任  被保人和投保人不一致  年龄大于18 -->
            <div ng-repeat="item in bbrList track by $index"  ng-show='isDieBlame == 1 && item.issame !=1 && item.bbrage >= 18'>
                <p class="titleGlobal-tbqr">被保险人确认</p >
                <div class="flexWrap-tbqr">
                    <span>
                        姓名
                    </span>
                    <span>{{item.bbr_name}}</span>
                </div>
                <div class="flexWrap-tbqr">
                    <div>
                        被保人签名
                    </div>
                    <a class="autoGraph-tbqr-tbqr flexWrap-tbqr"  ng-click="signNature('1',$index)" style="border:none;">
                        <div class="nameImgWrap-tbqr">
                            < img id="{{'nameImg-tbqr'+$index}}" src="" />
                        </div>
                        <input type="hidden"  id="{{'signatureImg_'+$index}}" />
                        <span class="autoGraph-tbqr  {{'plachoder-tbqr'+$index}}">
                            请点击此处完成签名
                        </span>
                    </ a>
                </div>
            </div>
        </div>
        <div class="flexWrap-tbqr sureDate-tbqr signNatureWrap-tbqr" style="border: none;">
            <div class="titleGlobal-tbqr" style="padding:0">
                签名确认日期
            </div>
            <div class="date-tbqr"> {{nowDate}}</div>
        </div>
        <p class="copyRight-tbqr">版权所有2001-2020太平养老保险股份有限公司</p >
       
    </ion-content>
    <div class="flexWrap-tbqr" style="padding:14px;position: fixed;width: 100%;bottom: 0;">
        <div class="back-tbqr" ng-click='back()'>
            返回
        </div>
        <div class="goNext-tbqr" ng-show='!status'>
            下一步
        </div>
       <div class="goNext-tbqr" style="background-color: #046cb6;" ng-click='goNext()' ng-show="status">
            下一步
        </div>
    </div>      
    <!--alertInfo 签名弹框-->
    <div class="hide-mark-tbqr" ng-click="noneFunc($event)" ng-if='signNaturePass' id="mark">
        <div class="div-bg-tbqr">
            <div class="alretSignWrap-tbqr">
                <div class="popup-head-tbqr flexWrap-tbqr titleGlobal-tbqr">
                    <span style="flex: 1;text-align: center;">投保确认</span>
                    <div class="deleteImg-tbqr" ng-click="hideAlert()">
                        < img src="./img/26tracBack/close.png" alt="">
                    </div>
                </div>
                <form id="formquestionCC" action="" method="post">
                    <div class="popupBg1" id="question1" style="width:100%;">
                        <div class="part1" style="width:100%;height:100%;">
                            <!--签名区-->
                            <div colspan="2" class="positionR-tbqr">
                                <p class="tip-tbqr">请签字确认:</p >
                                <div id="signature1"  style="height: 150px;"> </div>
                                <div class="qianming-tbqr"> 签名区</div>
                            </div>
                            <div style="height:45px;">
                                <div class="sub-center-tbqr left-tbqr"> < a href="javascript:void(0)"
                                        ng-click="resetSig1()">重签</ a> </div>
                                <div class="line"></div>
                                <div class="sub-center-tbqr right-tbqr"> < a href="javascript:void(0)"
                                        ng-click="quedingfile()">确定</ a></div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</ion-view>

组件的scope为true,选择此模式表示新创建了一个作用域,且继承了父作用域。

  • angularjs指令中的scope,三种属性的特点:
  • 1.true:新创建了一个作用域,且继承了父作用域;在初始化的时候,用了父作用域的属性和方法,去填充了这个新的作用域,它和作用域不是同一个作用域;
  • 2.fase默认(不指定时候):创建的指令和父作用域(其实是同一个作用域)共享同一个model模型,在指令中修改模型数据,会反映到父作用域的模型中;
  • 3.{ }:新创建了一个作用域,不继承父作用域,表示一个独立的作用域isolated。
angular.module('starter').directive("newPicker26", function($filter, zytHttp, $timeout,$ionicScrollDelegate,zytTbHttp,$rootScope){
    return {
        templateUrl: "js/newPicker26.html",
        scope: true,
        controller: ["$scope", function ($scope) {
            var urlParams = getURLParams(location.href);
            $scope.insureTmpFlag = urlParams.insureTmpFlag; 
            $scope.paySyyl = urlParams.paySyyl; //
            $scope.gopayFlag = urlParams.gopayFlag; //长期意外
            $scope.goPay = urlParams.goPay;
            $scope.tbrName = '';
            $scope.bbrList = [];
            $scope.bbrAgeSame = false;
            $scope.judgeObj = {
                issameFlag:true,
                ageFlag:true
            };
          
            $scope.isCheckedAgeFlag = false;
            $scope.RelAgepass = true;//增加姓名和投被保人关系非本人校验
            $scope.RelAgepass2 = false;//增加姓名和投被保人关系非本人校验
            $scope.init= function(){ //初始化页面获取数据
                var busi={
                    "token": urlParams.productToken,
                    "polno": $scope.insureParams.policyCode,
                }
                zytHttp.post("ZYT_TB_076",busi, function (data){
                    if (data.error.isSuc == "1") {
                        console.log(data);                        
                        $scope.tbrName = data.item.zbbrName;
                        $scope.isDieBlame =  data.item.isDieBlame; //是否身故责任
                        var list = data.item.bbrList;
                        for(var i in list){
                            if(list[i].issame=='0' && $scope.judgeObj.issameFlag){
                                $scope.judgeObj.issameFlag=false;
                            }
                            if(list[i].issame=='0' && list[i].bbrage<18 && $scope.judgeObj.ageFlag){
                                $scope.judgeObj.ageFlag=false;
                            }
                            if(list[i].issame!='1' && list[i].bbrage>=18 && $scope.isDieBlame=='1'){
                                $scope.bbrAgeSame=true;
                                $scope.bbrList.push(list[i]);
                            }
                        }               
                        $scope.$apply();
                    }
                });  
             };
            $scope.init();
        
            //调用条款阅读时间
            $scope.clauseShow= function(){ //初始化页面获取数据
                var busi={
                    polno: urlParams.policyCode
                }
                zytHttp.post("ZYT_TB_078", busi,function (data){
                    if (data.error.isSuc == "1") {
                         $scope.readClauseList = data.item.readInfo;
                         $scope.systime = data.item.systime;   
                         console.log(data.item)                
                    }
                });  
             };
            $scope.clauseShow();
            $scope.signNaturePass = false; // 是否打开签名框标志位
            $scope.signNatureCompelte = false; //投保人是否完成签名标志位
            $scope.bbrSignNatureCompelte =[];
            $scope.status = true;
          
            $scope.signNature = function (type,idx) { //请点击此处完成签名
              $scope.signNaturePass = true; 
              $scope.obj.type = type;
              $scope.obj.index = idx;
              $timeout(function(){
                $("#signature1").jSignature();
              },0)
            };
            
            $scope.hideAlert = function () {
                $scope.signNaturePass = false;
            };
              
            $scope.obj = {type:'',index:''};
            //$scope.title = data.item.productName;
            $scope.title = '团体终身重疾2019';
        
            //电子签名点击确认 生成电子签名照以及提交   
            $scope.quedingfile = function () {
                // 画板是否被修改 isModified 如果jSignature被修改,返回一个布尔值true,否则返回false。
                var $sigdiv1 = $("#signature1");
                $scope.isModified = $sigdiv1.jSignature("isModified");
                if (!$scope.isModified) {
                    confirm({
                        title: '错误',
                        msg: '签名未完成,请确定是否退出',
                        ok: '确定',
                        cancel: '取消'
                    }, function (res) {
                        if (res == 'ok') {
                            $scope.signNaturePass = false;
                        };              
                    });
                    $scope.signNaturePass = false;
                    return false;
                } else {
                    var src = $scope.getImg1();
                    var type = $scope.obj.type;
                    if(type =='0'){ //投保人
                        $("#nameImg-tbqr00").attr("src", src);
                        $("#nameImg-tbqr00").css({ "display": "block" });
                        $(".plachoder-tbqr00").css({ 'display': 'none' });
                        $("#nameImg-tbqr00").css({ 'background': '#f7f8f9' });
                        $scope.signNaturePass = false;
                        $scope.signNatureCompelte = true;
                    }
                   
                    if(type=='1'){ //被险人
                       var index = $scope.obj.index;
                        $("#" + "nameImg-tbqr"+ index).attr("src", src);
                        $("#" + "nameImg-tbqr"+ index).css({ "display": "block" });
                        $("."+ "plachoder-tbqr" + index).css({ 'display': 'none' });
                        $("#" + "nameImg-tbqr"+ index).css({ 'background': '#f7f8f9' });
                        $scope.signNaturePass = false;
                        $scope.bbrSignNatureCompelte[index] = true;
                        console.log(index, $scope.bbrSignNatureCompelte)
                    }
                    $scope.checkSignNature();
                    dipper.default.screenshot('', window.document.querySelector(".alretSignWrap-tbqr"));//截屏SDK
                    // if ($scope.template == 'TB_LEB_2' || $scope.template == 'TB_LEB_3' || $scope.template == 'TB_LEB_13') {
                    //     // $scope.makeCut(4)
                    // }
                    // setTimeout(function () {
                    //     $scope.signNaturePass = false;
                    //     console.log("弹框消失")
                    // }, 100)
                    //截图
                };
            };
        
            //电子签名 
            $(document).ready(function () {
                // $("#signature1").jSignature(); 
                $("#signature1").bind('click', function (e) {
                    $scope.getImg1();
                });     
            });
        
            //重签
            $scope.resetSig1 = function () {
                var type = $scope.obj.type;
                var index = $scope.obj.index;
                var $sigdiv1 = $("#signature1");
                $sigdiv1.jSignature("reset");
                if(type=='0'){
                    $("#signatureImg00").val("");
                    $("#signature1").children().remove();
                    $("#signature1").jSignature();     
                    $scope.signNatureCompelte = false;
                }
                if(type=='1'){
                    $("#" + "signatureImg"+ index).val("");
                    $("#signature1").children().remove();
                    $("#signature1").jSignature();     
                    $scope.bbrSignNatureCompelte[index] = false;
                }     
            };
        
            //生成签名照
            $scope.getImg1 = function () {
                var type = $scope.obj.type;
                var index = $scope.obj.index;
                var $sigdiv1 = $("#signature1");
                var datapair1 = $sigdiv1.jSignature("getData");
                if(type == '0'){
                    if (datapair1 != null && datapair1 != '' && datapair1 != undefined) {
                        $("#signatureImg00").val(datapair1.split("base64,")[1]);
                        return datapair1;
                    } 
                }
                if (datapair1 != null && datapair1 != '' && datapair1 != undefined) {
                    $("#" + "signatureImg"+ index).val(datapair1.split("base64,")[1]);
                    return datapair1;
                }        
            };
        
            //校验是否已签名
            $scope.checkSignNature =function(){
                if($scope.signNatureCompelte){
                    $scope.status = true;
                    if($scope.bbrSignNatureCompelte.length == $scope.bbrList.length){
                        for(let i=0;i<$scope.bbrSignNatureCompelte.length;i++){
                            if(!$scope.bbrSignNatureCompelte[i]){
                                $scope.status = false;
                                return $scope.status;                                  
                            }else{
                                $scope.status = true;
                            }
                        }           
                    }else{
                        $scope.status = false;
                    }
                }else{
                     $scope.status = false;
                }
                if($scope.status){
                    $scope.nowDate = $filter('date')(Date.now(),'yyyy/MM/dd');
                }
                return  $scope.status;   
            }   
        
            // 下一步
            $scope.goNext = function () {  
               if( $scope.checkSignNature()){        
                       if( $scope.paySyyl =='1' ){ //税延养老
                           goWithParams('paySYYL',{orderCode:$scope.insureParams.orderCode, productToken: urlParams.productToken});
                       }else if ($scope.gopayFlag =='1'){ //长期意外
                           goWithParams('pay', { orderCode: $scope.insureParams.orderCode, goPay: $scope.goPay});
                       } else{
                          goWithParams('pay', { orderCode:  $scope.insureParams.orderCode});
                       }                           
               }             
            }
        
            $scope.back = function () { 
                $scope.healthFlag = 0;
                $rootScope.showPicker26 = false;
                $scope.$apply();
                $scope.isCheckedAgeFlag = false;
                $scope.RelAgepass = true//增加姓名和投被保人关系非本人校验
                $scope.RelAgepass2 = false//增加姓名和投被保人关系非本人校验
                $ionicScrollDelegate.$getByHandle('contentScroll').scrollTop();
            }
        }]
    }
});

在index.html页面中引入组件的js

<script src="js/newPicker26.js"></script>

在需要引入的模板中添加组件

  • ①在页面模板html中添加组件,注意引用的组件名称为new-picker26和组件的原名稍有不同(可查看命名规则):
<!--签名确认页-->
<new-picker26 ng-if="showPicker26" title="团体终身重疾2019" name="{{showPicker26}}"></new-picker26>
  • 通过标志位showPicker26,来控制组件的显示与隐藏。在这个项目中,使用ng-if更符合需求,根据组件中的js,需要在页面操作到这一步时,才显示组件,并并且同时显示组件的时候,才调用组件中的接口和方法。
  • ng-if指令用于在表达式为false时移除HTML元素。
  • 如果if语句执行的结果为true,会添加移除元素,并显示。
  • ng-if指令不同于ng-hide,ng-hide隐藏元素,而ng-if是从DOM中移除元素。
  • ② 在页面模板js中添加判断组件显示的标志位:
//显示签名确认页
$scope.insureParams.policyCode = data.item.policyCode; //投保单号
$scope.insureParams.orderCode = data.item.orderCode;  //订单号
$rootScope.showPicker26 = true;   //跳转至签名确认页
  • 因为组件的scope属性选择的是true,那么 ,子组件可以继承父作用域,所以,子组件需要的policyCode和orderCode,可以在父组件中赋值,那么,子组件中可以直接继承调用父作用域的中参数。
  • 组件显示的标志位,使用的是$rootScope,这样可以运用于整个应用中,比较方便。
  • 根作用域
  • 所有的应用都有一个**$rootScope**,它可以作用在ng-app指令包含的所有html元素中。
  • $rootScope可作用于整个应用中,是各个controller中scoped的桥梁,用rootscope定义的值,可以在各个controller中使用。



https://www.xamrdz.com/web/2fs1957580.html

相关文章: