AngularJS

Question

我在使用简单的 angular 应用程序时遇到了大问题。刷新页面后，html全部丢失！
我的问题不是 angular 数据 and/or session/local 存储数据，而是 HTML.
例如，当通过导航栏 "Home" 按钮访问主页时，它看起来像：

点击刷新按钮或按 f5 "Home Page" 后 h1 标签丢失：

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

编辑大家好，感谢您的评论。

@devqon - 我认为这里不需要 locationProvider。我正在使用路由提供者。我更改了一些路由配置：将“”替换为“”并在配置末尾放置其他语句：

<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 在第一个屏幕截图上。 @Gustavo Gabriel - 你能更具体一点吗？ :) 上述更改没有解决问题:(

编辑 2

@Kai - 谢谢您的回复。在您的建议之后，我更改了配置，现在它看起来像： app.config(函数($routeProvider, $httpProvider) { $routeProvider.when("/", { 模板网址："src/html/home.html"，控制器："HomeCtrl" }) .when("/航班", { 模板网址："src/html/flights.html"，控制器："FlightCtrl" }) .when("/客户", { 模板网址："src/html/customers.html"，控制器："CustomerCtrl" }) .when("/登录", { 模板网址："src/html/login.html"，控制器："HeaderCtrl" }) .when("/flight_choose", { 模板网址："src/html/flight_choose.html"，控制器："FlightChooseCtrl" }).否则("/");



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

}); 我还为主页更改了导航栏 link：问题依旧，可能是我误会你了。有任何想法吗？

提前致谢，米甲

Answer 1

您在路由中包含 HeaderCtrl 会导致问题，因为您为同一 /home 路径指定了两个控制器。将 .when ("/" 的 controller 更改为 HomeCtrl，只需在 HTML 中将 Header 的 HeaderCtrl 指定为属性，ng-controller="HeaderCtrl".我以前也犯过同样的错误。

Answer 2

看起来，我已经创建了用于附加 html 部分的指令，这在路由和 ng-view 中效果不佳。正如您在我的第一个 post 上看到的那样，我的 index.html body 看起来像：

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

我只是想让我的 index.html 尽可能简单。我已经为 header 创建了 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>

深入挖掘后，我发现 angular 团队在该场景中存在问题，并且有简单的解决方案： https://github.com/angular/angular.js/issues/6812

根据@jswright 和@saidimu 写的：

if ng-view instantiation is delayed (through ng-include) then the $route instantiation is delayed as well. This means that $route will miss the location change event.

Fix: Run $route update function on instantiation (not just on the location change event)

因此，为了解决这个问题，您只需将 $route 注入运行函数即可。

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

}]);
</code>

我发现关于 $route post 很有趣：

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

再一次，谢谢大家的帮助。

AngularJS - 刷新页面后丢失 html

AngularJS - Lost html after refreshing page

html

javascript

ngroute