SPA 中的灰屏问题（angular Js + Web API）

Question

我们正在开发一个应用程序，我们在其中使用 Angularjs + webapi 并制作一个单页应用程序。

我们在应用程序中使用了很少来自 Bootstrap 的模态弹出窗口，但我们面临一个问题

-> 单击模态按钮时，背景会初始化，然后卡在没有模态的状态。我们必须强制刷新浏览器。我们正在将其他文件中的模板拉入模式。

最初是为了关闭模态，我使用了 $(".modal.in").hide(); 并且在灰色屏幕上没有 "Stuck" 时关闭很好。

然后稍后初始化模态本身，它开始出现，然后我删除了淡入淡出 class 并从 css 中删除了动画，但没有太大帮助。

确实需要一个有前途的修复。

$.support.transition = (function () {
  var thisBody = document.body || document.documentElement
    , thisStyle = thisBody.style
    , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined ||     thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined
  return support
})()

// set CSS transition event type
if ( $.support.transition ) {
  transitionEnd = "TransitionEnd"
  if ( $.browser.webkit ) {
    transitionEnd = "webkitTransitionEnd"
  } else if ( $.browser.mozilla || $.browser.msie ) {
    transitionEnd = "transitionend"
  } else if ( $.browser.opera ) {
    transitionEnd = "oTransitionEnd"
  }
}

上面的代码片段在一些论坛中被推荐。

但在 Bootstrap.js Bootstrap v3.2.0 (http://getbootstrap.com)

function transitionEnd() {
var el = document.createElement('bootstrap')

var transEndEventNames = {
  WebkitTransition : 'webkitTransitionEnd',
  MozTransition    : 'transitionend',
  OTransition      : 'oTransitionEnd otransitionend',
  transition       : 'transitionend'
}

for (var name in transEndEventNames) {
  if (el.style[name] !== undefined) {
    return { end: transEndEventNames[name] }
  }
}

return false // explicit for ie8 (  ._.)
}

Answer 1

您可以创建一个包含您想要和启动的模板的指令，然后在该指令中使用 with 控制 boostrap 模态。外部通信可以通过多种方式实现，我最喜欢使用指令监视的自定义事件来知道何时隐藏或显示模式，这样您就可以使用指令内部已有的所有 bootstrap 代码。这也可以通过服务来完成，这不是我最喜欢的解决方案，但也可以接受。有关更多想法，请查看 angular-ui 项目和模态服务

http://angular-ui.github.io/bootstrap/

SPA 中的灰屏问题（angular Js + Web API）

Grey Screen issue in SPA (angular Js + Web API)

twitter-bootstrap

angularjs