javascript - Angular中原生的js失效,无法使用

查看:113
本文介绍了javascript - Angular中原生的js失效,无法使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

完整的HTML和controller,Angular的指令也都可以用,但是有一部分需要写原生是js代码,但是发现原生的js无法使用
html:

<a type="button" onclick="printOrder()">直接打印</a>

js中:

var LODOP; //声明为全局变量  
function printPreview(){  
    //创建小票打印页  
    CreatePrintPage();  
    //打印预览  
    LODOP.PREVIEW();      
};  
/**  
* 样例函数,服务器确认订单后执行  
*/  
function printOrder() {  
          
    //创建小票打印页  
    CreatePrintPage();  
    //开始打印  
    LODOP.PRINT();    
      
};            
function CreatePrintPage(json) {  
    //json 创建模拟服务器响应的订单信息对象  
    var json = {"title":"XXXXX订单信息", "name":"张三", "phone": "138123456789", "orderTime": "2012-10-11 15:30:15",   
    "orderNo": "20122157481315", "shop":"XX连锁", "total":25.10,"totalCount":6,  
    "goodsList":[  
    {"name":"菜心(无公害食品)", "price":5.00, "count":2, "total":10.08},   
    {"name":"菜心(无公害食品)", "price":5.00, "count":2, "total":10.02},   
    {"name":"旺菜", "price":4.50, "count":1, "total":4.50},  
    {"name":"黄心番薯(有机食品)", "price":4.50, "count":1, "total":4.50}  
    ]  
    }     
    var hPos=10,//小票上边距  
    pageWidth=580,//小票宽度  
    rowHeight=15,//小票行距  
    //获取控件对象  
    LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));   
    //初始化   
    LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_名片");  
    //添加小票标题文本  
    LODOP.ADD_PRINT_TEXT(hPos,30,pageWidth,rowHeight,json.title);  
    //上边距往下移  
    hPos+=rowHeight;  
      
    LODOP.ADD_PRINT_TEXT(hPos,1,pageWidth,rowHeight,"姓名:");  
    LODOP.ADD_PRINT_TEXT(hPos,30,pageWidth,rowHeight,json.name);  
    //hPos+=rowHeight; //电话不换行  
    LODOP.ADD_PRINT_TEXT(hPos,70,pageWidth,rowHeight,"电话:");  
    LODOP.ADD_PRINT_TEXT(hPos,100,pageWidth,rowHeight,json.phone);  
    hPos+=rowHeight;  
    LODOP.ADD_PRINT_TEXT(hPos,1,pageWidth,rowHeight,"下单时间:");  
    LODOP.ADD_PRINT_TEXT(hPos,60,pageWidth,rowHeight,json.orderTime);  
    hPos+=rowHeight;  
    LODOP.ADD_PRINT_TEXT(hPos,1,pageWidth,rowHeight,"订单编号:");  
    LODOP.ADD_PRINT_TEXT(hPos,60,pageWidth,rowHeight,json.orderNo);  
    hPos+=rowHeight;  
    LODOP.ADD_PRINT_TEXT(hPos,1,pageWidth,rowHeight,"取货门店:");  
    LODOP.ADD_PRINT_TEXT(hPos,60,pageWidth,rowHeight,json.shop);  
    hPos+=rowHeight;  
    LODOP.ADD_PRINT_LINE(hPos,2, hPos, pageWidth,2, 1);  
    hPos+=5;  
    LODOP.ADD_PRINT_TEXT(hPos,1,pageWidth,rowHeight,"商品名称");  
    LODOP.ADD_PRINT_TEXT(hPos,70,pageWidth,rowHeight,"单价");  
    LODOP.ADD_PRINT_TEXT(hPos,110,pageWidth,rowHeight,"数量");  
    LODOP.ADD_PRINT_TEXT(hPos,140,pageWidth,rowHeight,"小计");  
    hPos+=rowHeight;  
    //遍历json的商品数组  
    for(var i=0;i<json.goodsList.length;i++){  
          
        if(json.goodsList[i].name.length<4){  
            LODOP.ADD_PRINT_TEXT(hPos,1,pageWidth,rowHeight,json.goodsList[i].name);  
        }else {  
            //商品名字过长,其他字段需要换行  
            LODOP.ADD_PRINT_TEXT(hPos,1,pageWidth,rowHeight,json.goodsList[i].name);  
            hPos+=rowHeight;  
        }  
        LODOP.ADD_PRINT_TEXT(hPos,70,pageWidth,rowHeight,json.goodsList[i].price);  
        LODOP.ADD_PRINT_TEXT(hPos,115,pageWidth,rowHeight,json.goodsList[i].count);  
        LODOP.ADD_PRINT_TEXT(hPos,140,pageWidth,rowHeight,json.goodsList[i].total);  
        hPos+=rowHeight;  
        }  
    //商品遍历打印完毕,空一行  
    hPos+=rowHeight;  
    //合计  
    LODOP.ADD_PRINT_TEXT(hPos,80,pageWidth,rowHeight,"合计:"+json.totalCount);  
    LODOP.ADD_PRINT_TEXT(hPos,130,pageWidth,rowHeight,"¥"+json.total);  
      
    hPos+=rowHeight;  
    LODOP.ADD_PRINT_TEXT(hPos,2,pageWidth,rowHeight,(new Date()).toLocaleDateString()+" "+(new Date()).toLocaleTimeString())  
    hPos+=rowHeight;  
    LODOP.ADD_PRINT_TEXT(hPos,25,pageWidth,rowHeight,"谢谢惠顾,欢迎下次光临!");  
    //初始化打印页的规格  
    LODOP.SET_PRINT_PAGESIZE(3,pageWidth,45,"XXXXX订单信息");  
      
};

但是报错:


我试了很简单的代码,onclick也不管用,这是为什么

解决方案

你既然用了angular,那应该会有若干个controller,你应该在 需要点击的链接 所在的controller中声明对应的事件回调方法,并且应该通过ng-click指令绑定对应的事件回调

这篇关于javascript - Angular中原生的js失效,无法使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆