angularjs + bootstrap ui + $modal -> only displaying on the first time

时间:2022-05-25 19:36:33

I created a plunker to recreate the problem: http://plnkr.co/edit/sPPB0Cq0PUg1jmzzZtXh

我创建了一个用于重新创建问题的plunker:http://plnkr.co/edit/sPPB0Cq0PUg1jmzzZtXh

It contains a mini angular js app with angular-ui-bootsrap.

它包含一个带角度ui-bootsrap的迷你角度js应用程序。

  • index.html - main html file with js includes and a ng-view div.
  • index.html - 包含js的主html文件和ng-view div。
  • other.html, main.html - the views
  • other.html,main.html - 视图
  • app.js - main angular js file with declaration of app.
  • app.js - 带有app声明的主角js文件。
  • modal.js - some js stuff related to the modal. I wrapped $modal with my own service that responds to a broadcasted "show-modal" event by showing a modal and created a directive that attaches to elements as an attribute and emits/broadcasts this event.
  • modal.js - 与模态相关的一些js东西。我用我自己的服务包装$ modal,通过显示模态并创建一个指令作为属性附加到元素并发出/广播此事件来响应广播的“show-modal”事件。

The problem:
I'm trying to use $modal service to open a modal window.
It opens, then after I close it, i cannot open it again.
Actually, when trying to open again, it appears to not open. but when navigating to another location in the angular app the modal suddenly appear(or modals if you clicked many times) .

问题:我正在尝试使用$ modal服务来打开模态窗口。它打开,然后在我关闭之后,我再也无法打开它。实际上,当试图再次打开时,似乎无法打开。但是当导航到角应用程序中的另一个位置时,模态突然出现(或者如果你多次点击则为模态)。

I'm kinda lost and the documentation didn't really help me.
Can anyone check it out and tell me what am i doing wrong?

我有点失落,文档并没有真正帮助我。任何人都可以检查出来告诉我我做错了什么?

1 个解决方案

#1


2  

After reviewing some cases in which the modal does work, i think i got a solution up at the same plunker i put before
http://plnkr.co/edit/sPPB0Cq0PUg1jmzzZtXh

在回顾了模态确实有效的一些案例后,我想我在http://plnkr.co/edit/sPPB0Cq0PUg1jmzzZtXh之前的同一个plunker上得到了一个解决方案。

You have to use $modalInstance to .close() and .dismiss() the modal.

你必须使用$ modalInstance来.close()和.dismiss()这个模态。

the docs suggest one could use the injected $close $dismiss functions but using these caused the problem for me...

文档建议可以使用注入的$ close $ dismiss函数,但使用这些函数会给我带来问题......

I left the problem as is and implemented the solution in new files so you can review both (at your pleasure).

我按原样保留了问题并在新文件中实现了解决方案,因此您可以(根据您的意愿)查看两者。

--- EDIT ---

---编辑---

if all fails $scope.apply() (or $rootScope.apply())
i tried to scope.apply after issuing the signal to open the modal and it successfully showed the modal immidietaly instead of on the next cycle (which was triggered for example by going to another page)

如果所有都失败了$ scope.apply()(或$ rootScope.apply())我在发出信号后尝试使用scope.apply来打开模态并且它成功地显示模态而不是在下一个周期(触发了例如,转到另一页)

#1


2  

After reviewing some cases in which the modal does work, i think i got a solution up at the same plunker i put before
http://plnkr.co/edit/sPPB0Cq0PUg1jmzzZtXh

在回顾了模态确实有效的一些案例后,我想我在http://plnkr.co/edit/sPPB0Cq0PUg1jmzzZtXh之前的同一个plunker上得到了一个解决方案。

You have to use $modalInstance to .close() and .dismiss() the modal.

你必须使用$ modalInstance来.close()和.dismiss()这个模态。

the docs suggest one could use the injected $close $dismiss functions but using these caused the problem for me...

文档建议可以使用注入的$ close $ dismiss函数,但使用这些函数会给我带来问题......

I left the problem as is and implemented the solution in new files so you can review both (at your pleasure).

我按原样保留了问题并在新文件中实现了解决方案,因此您可以(根据您的意愿)查看两者。

--- EDIT ---

---编辑---

if all fails $scope.apply() (or $rootScope.apply())
i tried to scope.apply after issuing the signal to open the modal and it successfully showed the modal immidietaly instead of on the next cycle (which was triggered for example by going to another page)

如果所有都失败了$ scope.apply()(或$ rootScope.apply())我在发出信号后尝试使用scope.apply来打开模态并且它成功地显示模态而不是在下一个周期(触发了例如,转到另一页)