Question

我正在尝试编写自己的照片滑块，以便我在Django主页上显示的图像和文本将从一个淡入淡出（然后重复）。

我创建了一个超时函数，用于将$ scope.current_slide变量从1-3循环，然后以设定的间隔返回1。

我在每个<div>上使用ng-show，这样当$ scope.current_slide变量等于幻灯片数时，每张图片都会出现。

我遇到的问题：当我使用超时功能时，图像不会循环显示。然而！我在理论上知道我的代码应该有效，因为当我创建一个按钮时，使用ng-click允许按钮增加一个有角度的“click”变量（1,2,3等），正确的图片会显示出来。 / p>

使用超时功能无法正确滚动图片。我添加了$ scope。$ apply（）认为这会修复它，但没有任何改变。

我在home.html页面中有JS文件，因此它可以动态地从Django中提取幻灯片的总数。

home.html的

    <script>
var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap', 'ngAnimate']);

myApp.controller('myController', ['$scope', '$timeout', function($scope, $timeout) {


$scope.timeInMs = 0;
$scope.current_slide = 1;
// FUNCTION EXECUTES EVERY FEW SECONDS, INCREMENTS THE $scope.current_slide VARIABLE
var countUp = function() {
    $scope.timeInMs+= 2200;
    $timeout(countUp, 2200);
    $scope.current_slide += 1;
    if($scope.current_slide > sliderscount) {
    $scope.current_slide = 1;
    }
    $scope.$apply();


}

$timeout(countUp, 2200);

}]);
// This variable indicates the total number of slides we have 
var sliderscount = {{ sliders_count }};



</script>

{% for slider in sliders %}
      <div ng-init="current_slide=1" ng-show="current_slide == '{{ forloop.counter }}'" style="background-image: url('{{ MEDIA_URL }}{{ slider.background_image }}');" id="bannerHome" class="container-fluid slider{{ forloop.counter }} animate-show-hide" >
        <h1 class = "bannerSlideMain">{{ slider.headline | upper }}</h1>
        <p class = "bannerSlideSub">{{ slider.subhead }}</p>
        <p><a id = "bannerButton" href = "{% url 'about-view' %}" role = "button">LEARN MORE
          <span class = "glyphicon glyphicon-arrow-right" aria-hidden = "true"><span></a>
        </p>
      </div>
{% endfor %}
// WHEN CLICKED, VARIABLE UPDATES, AND PICTURES SCROLL THROUGH
<button ng-click="count = count + 1" ng-init="count=0">Hello!</button>
{% endblock %}

Answer 1

https://www.sitepoint.com/understanding-angulars-apply-digest/

$ digest循环由于调用$ scope而开始。$ digest（）。假设您通过ng-click指令更改处理函数中的范围模型。在这种情况下，AngularJS通过调用$ digest（）自动触发$ digest循环。当$ digest周期开始时，它会触发每个观察者。这些观察者检查范围模型的当前值是否与上次计算的值不同。如果是，则执行相应的侦听器函数

P.S为什么不使用$ interval？

Answer 2

我怀疑，问题是ng-show中的current_slide变量没有被更新。我可以通过复制以下解决方案来更新它： How to pass scope variable in ng-init using AngularJS

我在另一个HTML文件中有一个ng-controller声明（一个由Django＆＃39; include＆＃39;模板选项链接的文件）。出于某种原因，如果将ng-controller声明放在单独的HTML文件中，这将无法正常工作。我很想知道为什么。

ng-show没有使用$ timeout函数更新

2 个答案: