如何在角度带中进行模态放置和动画

时间:2014-11-18 11:19:53

标签: angularjs angular-strap

我已经将我的项目设置为使用带有自举角的带子,而具有bs-modal属性的按钮打开模态而没有问题数据放置和数据动画属性没有做任何事情。我尝试通过指令配置将动画和贴片作为默认值传递,但这也无济于事。

我有:

  1. angular(with angular-animate.js),angular-strap(包括angular-strap.tpl.js),加载bootstrap js文件
  2. 我也加载了angular-motion.css文件
  3. 模态在顶部打开,没有动画,无论我为动画或放置设置
  4. 我是否缺少更多文档中的css或js要求?

1 个答案:

答案 0 :(得分:1)

好的经过一些修修补补后想出来了。动画不起作用,因为如果你想使用它,你必须将animate js注入到指令中:

angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap']);

这实际上是在github页面上提到的,但在文档中却没有,所以我错过了。

放置不起作用似乎是基本bootstrap css实际上不支持模态的中心类的问题。也许有点不幸的是,文档使用它作为一个例子,但只有你自己添加css才能使用它。所以实际使用:

data-placement="center"

..您必须从此处的文档中加载css:http://mgcrea.github.io/angular-strap/styles/libraries.min.css

或只是复制部件以进行居中模式:

.modal.center .modal-dialog {
    position:fixed;
    top:40%;
    left:50%;
    min-width:320px;
    max-width:630px;
    width:50%;
    -webkit-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%)
}