Question

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

我们在应用程序中使用Bootstrap的Modal Pop-ups很少，但我们正面临一个问题

- ＆GT;单击模态按钮，背景初始化，然后卡住没有模态。我们必须强制刷新浏览器。我们将模板从其他文件中提取到模态中。

最初用于关闭模态，我使用$(".modal.in").hide();并且关闭很好，灰色屏幕上的“Stuck”。

然后稍后为init启动模态本身它开始出现然后我删除了淡入淡出类并从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

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

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

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

1 个答案: