Question

我正在开发一个AngularJS应用程序。我是AngularJS的新手。我正在使用AngularJS路由开发单页面应用程序。以下是我配置路线的方式。

app.config(function($routeProvider){
    $routeProvider
    .when('/',{ templateUrl : "admin/template" })
    .when('/account',{ templateUrl : "admin/account/edit" })
});

我用简单的页面测试过我的路由配置是否有效。简单的页面意味着我只为每个页面添加了一个html标题，如下所示。

<h1>Page 1</h1>
<h1>Page 2</h1>

然后我测试了路线点击链接。一切正常。当我重新点击访问过的链接时，页面显示正确。然后我开始开发第1页，其中包含一些数据和逻辑，如实现分页功能。一切正常。

但是有一个问题。当我从第1页点击第2页链接时，它被重定向到第2页。但是当我再次点击第1页时，它不起作用。它没有显示任何东西。但是当我刷新浏览器时，它会显示出来。然后问题是重新审视。

这是我的app.js

var app = angular.module('memeApp',['ngRoute','ui.bootstrap','blockUI','ngFileUpload'],function($interpolateProvider) {
        $interpolateProvider.startSymbol('<%');
        $interpolateProvider.endSymbol('%>');
    });

我更改了AngularJS的open和close标签，因为我使用的是Laravel框架。 Laravel使用Blade模板引擎。

这是我的第1页html

<div class="row" ng-controller="DefaultController" ng-init="getTemplatesUrl='{{ url('admin/templates') }}';init();">

<div class="col-md-12">
    <div class="row">
        <div class="col-md-12">
            <form name="createTemplateForm">
            <fieldset>
            <legend>Create new template</legend>
            <div>
                <label>Priortized </label>
                <input type="checkbox" ng-model="prioritized">
            </div>
            <input type="file" ngf-select ng-model="picFile" name="file"    
             accept="image/*" ngf-max-size="2MB" required
             ngf-model-invalid="errorFile">
            <i ng-show="createTemplateForm.file.$error.required">*required</i><br>
            <i ng-show="createTemplateForm.file.$error.maxSize">File too large 
              <span ng-bind="errorFile.size / 1000000|number:1"></span>MB: max 2M</i>
            <img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb">
            <br>
            <button ng-disabled="!createTemplateForm.$valid" 
              ng-click="uploadPic(picFile,'{{ url('admin/template/create') }}')">Submit</button>
            <span ng-show="createResult">Upload Successful</span>
            </fieldset>
            <br>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div ng-repeat="x in templates" class="col-md-2">
                    <div>
                        <img style="width:100px;" src="<% x.image_path %>">
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-12">
            <ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></ul>
        </div>
    </div>
</div>

</div>

控制器的js代码

app.controller('DefaultController', ['$scope', 'Upload', '$timeout', '$http', function ($scope, Upload, $timeout , $http) {
  $scope.init = function()
  {
    $scope.getTemplates(1);
  }
  $scope.templates = new Array();
  $scope.totalItems = 0;
  $scope.currentPage = 0;

  $scope.createResult = false;

  $scope.uploadPic = function(file,uploadUrl) {
    file.upload = Upload.upload({
        url: uploadUrl,
        data: { prioritized : $scope.prioritized , file: file},
    });

    file.upload.then(function (response) {
            $timeout(function () {
            $scope.createResult = response.data.status;
            if(response.data.status)
            {
              $scope.clearForm();
              $scope.getTemplates(1);
            }
            else{
              $scope.createResult = false;
            }
        });
    }, function (response) {
            if (response.status > 0)
        $scope.errorMsg = response.status + ': ' + response.data;
    }, function (evt) {
        // Math.min is to fix IE which reports 200% sometimes
        //file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
    });
  }

  $scope.clearForm = function()
  {
    $scope.picFile = null;
    $scope.prioritized = false;
  }

  $scope.pageChanged = function()
  {
    $scope.getTemplates($scope.currentPage);
  }

  $scope.getTemplates = function(page)
  {
    $http.get($scope.getTemplatesUrl+"?page="+page).then(function(response){
      var list_data = response.data.list_data;

      $scope.templates = list_data.data;
      $scope.totalItems = list_data.total;
      $scope.currentPage = page;
    });
  }
}]);

问题如下。

第1步

第2步

第3步

当我再次访问第1页（主页）时，为什么它不起作用。

Answer 1

我刚刚jsfidlled您的代码：http://jsfiddle.net/mtV62/871/

对我来说，您的页面网址中缺少斜杠：

<a href="#/">Home</a>

Answer 2

或者您可以将模块配置为使用html5mode。你不会需要＆＃34;＃＆＃34;在您的路线的开头，在锚点等元素

AngularJS路线在重新访问时无法正常工作

2 个答案: