为什么定制放在一边或滑动面板不使用角带滑动?

时间:2014-08-10 09:02:43

标签: javascript jquery angularjs angularjs-directive angular-strap

我正在制作一个幻灯片。所以我用Google搜索并发现了一个纠结的文库。我研究那个图书馆试图制作幻灯片。 http://mgcrea.github.io/angular-strap/##asides。我导入了所有必需的js,但是我的侧面板没有像现场那样滑动。我不知道我错在哪里。 这是我的代码与plunker。 http://plnkr.co/edit/GIFyFSdyJI8tHq5nlBBn?p=preview

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <script src="https://dl.dropboxusercontent.com/s/64qidru3z31h5ns/angular-strap.js"></script>
  <script src="https://dl.dropboxusercontent.com/s/meplmw59rwg2dmy/angular-strap.tpl.js?m=d"></script>
  <script src="https://dl.dropboxusercontent.com/s/8km0nfoc9noz9ns/modal.js?m="></script>
  <script src="https://dl.dropboxusercontent.com/s/40vdgl5hglimwfi/aside.js?m="></script>



</head>

<body class="container">
  <button type="button" class="btn btn-lg btn-danger" data-template="aside.html" data-placement="left" data-animation="am-slide-left" bs-aside="aside" data-container="body">Custom aside
  <br>
  <small>(using data-template)</small>
</button>
  <script>
    var myapp = angular.module('myApp', ['mgcrea.ngStrap','mgcrea.ngStrap.modal', 'mgcrea.ngStrap.aside']);
  </script>
</body>

</html>

1 个答案:

答案 0 :(得分:6)

根据他们的文件:

1)你应该包括angular-animate模块:

<script src="//code.angularjs.org/1.3.0-beta.5/angular-animate.min.js"></script>

2)您必须在AngularMotion项目中包含其他CSS动画样式:

  <link rel="stylesheet" href="//rawgithub.com/mgcrea/angular-motion/master/dist/angular-motion.min.css">

3)您还必须为旁白添加另一个CSS文件:

  <link rel="stylesheet" href="//mgcrea.github.io/angular-strap/static/styles/bootstrap-additions.min.css">

4)文档中没有提到 - 您必须将'ngAnimate'模块添加到依赖项中:

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

Plunker示例

http://plnkr.co/edit/WVx7F92xE8XcfeUqwV7l?p=preview