在angularJs中封装组件，全局调用
背景：在angularJs中，有时候，需要封装组件，公用的组件，方便多个模板调用添加，减少重复开发，提高效率。
思路：封装的组件，拥有自己独立的html和js，在项目中调用，需要先在index.html中引入该组件的JS，组件中的html和js添加需要实现的功能，然后，再需要引入的页面的html里面添加组件结构，js里面添加触发组件显示的标志位，以及需要传输的数据。
一、添加组件的内容
①组件的newPicker26.html内容：
-
< img src="./img/26tracBack/selected.png" alt="">
保险条款已悉知并理解
责任免除已知悉并理解
其他影响保单效力条款说明已知悉并理解
信息授权已知悉并理解
被保险人已同意投保并确认保险金额
阅读完成时间：{
{item.endtime}}
-
< img src="./img/26tracBack/selected.png" alt="">
健康告知已知悉并理解
阅读完成时间：{
{systime}}
-
< img src="./img/26tracBack/selected.png" alt="">
被保险人已同意投保并确认保险金额
签名确认日期
{
{nowDate}}
版权所有2001-2020太平养老保险股份有限公司
返回
下一步
下一步
②组件的newPicker26.js内容：
组件的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
三、在需要引入的模板中添加组件
①在页面模板html中添加组件，注意引用的组件名称为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中使用。
总结：在angularjs中封装组件，主要需要注意scope（作用域）的三种特点与不同，选择适合的模式；组件在页面模板html中引用时，注意引用的组件名称与组件原命名的不同点。
参考博客：深入理解AngularJS指令中的Scope，三种属性的不同点 https://blog.csdn.net/qq_26780317/article/details/108490265