Question

我的简单角度应用程序遇到了大问题。刷新页面后，所有的HTML都丢失了！
我的问题不是角度数据和/或会话/本地存储数据，而只是HTML 例如，当通过navbar＆＃34; Home＆＃34;访问主页时按钮看起来像：

点击刷新按钮或f5＆＃34;主页＆＃34;里面的h1标签丢失了：

所以问题是 - 我的路由配置有什么问题，或者这可能是角度的预期行为？我对这个问题看了很多，但大多数主题都是关于在$ localStorage或$ sessionStorage中保存数据。我的所有页面都会出现此问题。

修改嗨，大家好，感谢您的评论。

@devqon - 我不认为这里需要locationProvider。我正在使用routeProvider。我改变了一点路由配置：替换了＆＃39;＆＃39;用＆＃34;＆＃34;并在配置结束时加上其他声明：

<code>
app.config(function($routeProvider, $httpProvider) {
    $routeProvider.when("/", {
        templateUrl : "src/html/home.html",
        controller  : "HeaderCtrl"
    })
    .when("/home", {
        templateUrl : "src/html/home.html",
        controller  : "HomeCtrl"
    })
    .when("/flights", {
        templateUrl : "src/html/flights.html",
        controller  : "FlightCtrl"
    })
    .when("/customers", {
        templateUrl : "src/html/customers.html",
        controller  : "CustomerCtrl"
    })
    .when("/login", {
        templateUrl : "src/html/login.html",
        controller : "HeaderCtrl"
    })
    .when("/flight_choose", {
        templateUrl : "src/html/flight_choose.html",
        controller : "FlightChooseCtrl"
    }).otherwise("/home");

    $httpProvider.interceptors.push('airlinesRequestInterceptor');
});
</code>

正如您所看到的，我创建的HomeCtrl非常简单：

<code>
app.controller('HomeCtrl', function() {});
</code>

home.html是第一个screnshot。 @Gustavo Gabriel - 你能更具体一点吗？ :) 上述变化并未解决问题：（

编辑2

@Kai - 谢谢你的回复。在你的建议之后我更改了配置，现在它看起来像： app.config(function($routeProvider, $httpProvider) { $routeProvider.when("/", { templateUrl : "src/html/home.html", controller : "HomeCtrl" }) .when("/flights", { templateUrl : "src/html/flights.html", controller : "FlightCtrl" }) .when("/customers", { templateUrl : "src/html/customers.html", controller : "CustomerCtrl" }) .when("/login", { templateUrl : "src/html/login.html", controller : "HeaderCtrl" }) .when("/flight_choose", { templateUrl : "src/html/flight_choose.html", controller : "FlightChooseCtrl" }).otherwise("/");



$httpProvider.interceptors.push('airlinesRequestInterceptor');

$httpProvider.interceptors.push('airlinesRequestInterceptor'); 我还更改了Home的导航栏链接：问题仍然存在，所以也许我误解了你。有任何想法吗？

提前致谢，米甲

Answer 1

您在路由中包含HeaderCtrl会导致问题，因为您为同一/主路径指定了两个控制器。将controller的{{1}}更改为.when ("/"，然后在HTML中为标题指定HomeCtrl作为属性HeaderCtrl。我之前犯了同样的错误。

Answer 2

看起来，我已经创建了附加html部分的指令，这对于路由和ng-view不起作用。正如您在我的第一篇文章中看到的那样，我的index.html主体看起来像：

<code>
<body>
    <div class="wrapper">
        <ng-header></ng-header>
        <ng-content></ng-content>
        <ng-footer></ng-footer>
    </div>
</body>
</code>

我只想让index.html尽可能简单。我为头文件，内容，页脚和指令创建了html文件以便注入它们。例如，内容指令看起来像：

<code>
app.directive('ngContent', function() {
  return {
    restrict: 'A',
    templateUrl: '/src/html/content.html'
  }
});
</code>

当我将上述指令更改为此指令时，刷新页面后丢失html的问题消失了：

<code>
app.directive('ngContent', function() {
  return {
    template: '<div id="content">'+
    '<div ng-view></div>'+
    '</div>'
  };
});
</code>

经过一番挖掘，我发现角色团队存在一个问题，并且有一个简单的解决方案： https://github.com/angular/angular.js/issues/6812

根据@jswright和@saidimu写的：

如果ng-view实例化被延迟（通过ng-include），那么$ route实例化也会被延迟。这意味着$ route将错过位置更改事件。

修正：   在实例化上运行$ route update函数（不仅仅是在位置更改事件上）

所以为了解决这个问题你必须只将$ route注入run函数。

<code>
app.run(['$route', function($route)  {

}]);
</code>

我发现有关$ route的有趣帖子：

$route Must Be Injected In Order To Enable The $routeChangeSuccess Event In AngularJS

再一次，谢谢你们的帮助。

AngularJS - 刷新页面

2 个答案: