在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中使用。
405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
