ng-show 不使用 $timeout 函数更新答案

【问题标题】：ng-show not updating with $timeout functionng-show 不使用 $timeout 函数更新
【发布时间】：2017-10-14 23:55:23
【问题描述】：

我正在尝试编写自己的照片滑块，以便我的 Django 主页上的图像和文本会从一个渐变到下一个（然后重复）。

我创建了一个超时函数来循环 $scope.current_slide 变量从 1 到 3，并以设定的时间间隔返回 1。

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

我遇到的问题：当我使用超时功能时，图像没有循环显示。然而！我知道理论上我的代码应该可以工作，因为当我制作一个按钮并使用 ng-click 允许按钮增加一个角度“点击”变量（1、2、3 等）时，会显示正确的图片。

使用超时功能无法正确滚动图片。我添加了 $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 %}

【问题讨论】：

看起来你的 {{ forloop.counter }} 不依赖于 slider 循环变量
啊，是的，感谢您的回复！你是对的 - {{ forloop.counter }} 是 Django 的免费赠品。这部分实际上工作正常，因此 {{ forloop.counter }} 呈现为 1 / 2 / 3 或任何应有的值。
哦，我的错...尝试将 $scope.current_slide += 1; if($scope.current_slide > sliderscount) { $scope.current_slide = 1; } 移动到 $scope.$apply(function () { ... }) 函数中
嗯。当我将所有内容移到里面时，它给了我一个模块注入器错误

标签： javascript angularjs django

【解决方案1】：

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

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

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

【讨论】：

嗯。我尝试使用 $interval，我收到了相同的结果。我不确定 $scope.digest() 项是如何关联的，因为问题是变量根本没有被更新，而不是它很慢。然而！我确实想出了一个解决方案。不过，我很想听听您对此的看法

【解决方案2】：

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

我在另一个 HTML 文件（由 Django 的“包含”模板选项链接的文件）中有 ng-controller 声明。出于某种原因，如果您将 ng-controller 声明放在单独的 HTML 文件中，这将不起作用。我很想知道为什么。

【讨论】：