Question

我构建了一个Angular应用程序，当我将应用程序转到“＃/ browse”时，我需要重新加载页面。到达browse.html时，应用程序应重新加载页面。现在，应用程序不断重复加载页面。它陷入了一种循环。有谁知道如何打破这个循环？非常感谢。

browse.html。

<div class="header">
<div class="container-fluid">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <form class="navbar-form navbar-left searchbarNav" role="search">

        </form>
        <ul class="nav nav-pills pull-right" ng-controller="NavbarController">

            <li ng-class="{active:getActive('/home')}"><a href="#/products">Browse products</a></li>
            <li ng-class="{active:getActive('/browse')}"><a href="#/browse">Explore products</a></li>

            </ul>
        </div>
    </div>
</div>



<div class="ContentFlow">

<div class="loadIndicator"><div class="indicator"></div></div>

    <div class="flow" >

    <img ng-repeat="p in products" class="item" ng-src="static/products/img/{{p.thumbnail}}"
         title="{{p.name}} &#8364;{{p.price}}"  ng-href="#/products/{{p.id}}">

</div>
<div class="globalCaption"></div>
<div class="scrollbar">
    <div class="slider"><div class="position"></div></div>
</div>

</div>

controller.js

app.controller('BrowseController', function($scope, $window, Product){

Product.query(function(data){
    $scope.products = data
})

$window.location.reload()

})

app.js 'use strict';

var app = angular.module（'pgApp'，['ui']）;

app.config（function（$ routeProvider，$ httpProvider）{ $ routeProvider

.when('/home',
  {
    controller: 'ProductListController',
    templateUrl: 'static/products/app/partials/products.html'
  })
.when('/products/:productId',
  {
    controller: 'ProductDetailController',
    templateUrl: 'static/products/app/partials/product.html',

  })
.when('/browse',{
      controller: 'BrowseController',
      templateUrl: 'static/products/app/partials/browse.html'
  })
.when('/about',
  {
    templateUrl: 'static/products/app/partials/about.html'
  })
.otherwise({ redirectTo: '/home' });

$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
});

Answer 1

我找到了解决这个问题来自哪个更深层次问题的解决方案。我使用了一个名为contentflow.js的js插件。但是这个插件在处理异步数据方面并不是很好。为了解决这个问题，我把插件的一段代码放在一个函数中，并在控制器中调用了这个函数。

控制器

 app.controller('BrowseController', function($scope, $window, $location, Product){

     Product.query(function(data){
          $scope.products = data
     })

     ContentFlowGlobal.load()
 })

这里是contentflow.js中更改的代码。该功能可以在“init the rest”评论之后的行号202中找到。

 /* init the rest */

        ContentFlowGlobal.load = function(){
            setTimeout(function(){
                var divs = document.getElementsByTagName('div');
                DIVS: for (var i = 0; i < divs.length; i++) {
                    if (divs[i].className.match(/\bContentFlow\b/)) {

                        for (var j=0; j<ContentFlowGlobal.Flows.length; j++) {
                            if (divs[i] == ContentFlowGlobal.Flows[j].Container) continue DIVS;
                        }
                        var CF = new ContentFlow(divs[i],{}, false);
                        CF.init();
                    }
                }
            },1000)
        }

问题是在调用js文件之前元素没有完全呈现。这就是为什么在页面上找不到元素并且数组无法填充显示所需的数据。这可以通过使用setTimeout来解决。

它可能不是最好的解决方案，但它有效。如果您有更好的解决方案，请随时添加。

角页重新加载陷入循环

1 个答案: