javascript – MEAN.JS和角度引导旋转木马不工作

2019-07-28 13:35:09 阅读：147 来源： 互联网

标签：mean-stack angular-bootstrap javascript angularjs

我开始使用MEAN.JS并尝试在Angular Bootstrap examples page上实现轮播示例.我使用命令yo meanjs创建了一个样板项目并修改了home.client.view.html以删除jumbotron并将其替换为以下html(从ui bootstrap示例中复制)

<div ng-controller="MyCarouselController">
  <div style="height: 305px">
    <carousel interval="myInterval">
      <slide ng-repeat="slide in slides" active="slide.active">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide {{$index}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </slide>
    </carousel>
  </div>
  <div class="row">
    <div class="col-md-6">
      <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
    </div>
    <div class="col-md-6">
      Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
      <br />Enter a negative number to stop the interval.
    </div>
  </div>
</div>

我添加了一个名为MyCarouselController的控制器(文件名为carousel.client.controller.js)并从示例中添加了javascript

angular.module('core').controller('MyCarouselController', ['$scope', 'Authentication',
  function($scope, Authentication) {
    $scope.myInterval = 5000;
    var slides = $scope.slides = [];
    $scope.addSlide = function() {
      var newWidth = 600 + slides.length;
      slides.push({
        image: 'http://placekitten.com/' + newWidth + '/300',
        text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
          ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
      });
    };
    for (var i=0; i<4; i++) {
      $scope.addSlide();
    }
  }
]);

第一次转换(自动或用户点击)后出现问题.轮播变得没有响应,开发人员控制台中没有显示错误消息.

我已经验证了ui-bootstrap也作为依赖项包含在config.js文件中.

我不知道从哪里看这里,并希望有人能够指出我正确的方向.我已将项目的副本推送到Github,以便任何有兴趣了解它的人.

https://github.com/jamesamuir/MEANTest

解决方法:

角动画模块和角度引导程序是一个错误…显然它已经存在,它需要一些挖掘,但有答案.

它上面有一堆掠夺者(参见github angular-ui / bootstrap issue threads #1273 #1350).它的要点是：

控制器中的$animate.enabled(false)将修复它.当然,取决于你是否在该控制器中使用动画,你需要摆弄一下.

把它放在你的控制器中,它会工作.您可以使用其他设置(设置为true)并查看它是如何破坏的.您需要在控制器中引用$animate来执行此操作.

angular.module('core').controller('MyCarouselController', ['$scope', 'ngAnimate', 'Authentication',
      function($scope, $animate, Authentication) {

    $animate.enabled(false);

标签：mean-stack,angular-bootstrap,javascript,angularjs
来源： https://codeday.me/bug/20190728/1562062.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – MEAN.JS和角度引导旋转木马不工作