ng显示未使用$timeout函数进行更新



我正在尝试编写自己的照片滑块,这样我在Django主页上的图像和文本就会从一个渐变到另一个(然后重复)。

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

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

我遇到的问题是:当我使用超时功能时,图像无法循环通过。然而理论上我知道我的代码应该可以工作,因为当我制作一个按钮,并使用ng-click允许按钮增加一个角度"点击"变量(1、2、3等)时,会显示正确的图片。

使用超时功能,图片无法正确滚动。我添加了$scope$appley()认为这会解决问题,但什么都没有改变。

我在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 %}

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

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

p.S为什么不使用$interval?

正如我所怀疑的,问题是ng-show中的current_slide变量没有更新。我可以通过复制以下解决方案进行更新:如何使用AngularJS 在ng init中传递范围变量

我在另一个HTML文件中有ng控制器声明(该文件由Django的"include"模板选项链接)。出于某种原因,如果将ng控制器声明放在一个单独的HTML文件中,这将不起作用。我很想知道原因。

最新更新