AngularJS进阶(三十一)AngularJS项目开发技巧之获取模态对话框中的组件ID_模态框中的id 拿不到(2)

最新推荐文章于 2024-10-01 20:12:28 发布

2401_84433974

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量318

点赞数 4

文章标签： angular.js javascript 前端

本文链接：https://blog.csdn.net/2401_84433974/article/details/138230631

版权

…

配送药店:

确认配送

残忍拒绝

取消


      由于模态框的实现代码位于JS脚本中。则考虑使用获取组件ID的方式获取相应组件“确认配送”“残忍拒绝”的ID，经过在其控制器中获取测试，总是显示其值为null。获取语句如下:

console.log(“LTT_Sunny:”);
console.log(instance.bill_status_code);
if(instance.bill_status_code === ‘1’ || instance.bill_status_code == ‘2’){
alert(“SHQ:” + document.getElementById(“reject”));
}



      经过进一步的阅读代码，发现可以先获取模态框组件的ID，即如下语句实现:

document.getElementById(“billDtlContent.html”).innerHTML;



      执行后的结果如下图所示:


 ![](https://img-blog.csdn.net/20160120165242858?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)


      那么是不是可以进一步获取其内部组件的ID呢？继续尝试如下:

document.getElementById(“billDtlContent.html”).innerHTML.getElementById(“reject”));



      结果出现了错误，如下所示:


 ![](https://img-blog.csdn.net/20160120165417780?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)


      吸取前面做二维码时的教训，在其相应html页面中添加如下语句:


      <i id="sunny" hidden="hidden"></i>  
       控制器中的语句如下:

document.getElementById(“sunny”).innerHTML = htmlContent;
alert(“SHQ:” + document.getElementById(“sunny”).innerHTML);
alert(“SHQ:” + document.getElementById(“reject”));



      结果获取到了相应组件的ID。


 ![](https://img-blog.csdn.net/20160120165442040?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)


### 总结


      有时一个问题解决不了，就应该尝试着通过其它途径进行解决。就像在本文中，既然直接获取无法获取到JS脚本中组件的ID，自己就尝试着将获取到的页面内容再次放到原页面内，然后通过DOM操作再次获取。


### 后续工作


      获取到模态框组件ID之后，就需要实现需求了。有关组件的隐藏方法自己已经完成。如下所示:

//控件隐藏控制函数
function displayHideUI(object)
{
var ui = object;

ui.style.display = “none”;
}

// 控件显示控制函数
function displayUI(object)
{
var ui = object;

ui.style.display = “inline-block”;
}



      在控制器中调用控件设置方法没有看到效果。


      displayHideUI(document.getElementById("reject"));


      通过DOM操作可获取到其中的ID名称等等。如下所示:


      alert("SHQ:" + document.getElementById("reject").attributes[0].value);


 ![](https://img-blog.csdn.net/20160120165552499?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)


      在view中做文章是不可能的了，还是需要改变一下思路。**有时灵感就是来的这么突然，就像幸福一样。**考虑在控制器中下手，还是阅读代码，思考是否可以通过if\_else的形式实现上述效果。ng-if就暂不考虑了，因为一般的if语句就足以解决问题。既然模态框是根据其ID值加载的，那么自己就可以在控制器中通过if语句控制加载不同的模态框。那么自己就需要在模态框中添加新的模态框内容了。添加的模态框内容如下:

订单编号:

…