AngularJS 路由:刷新时丢失内容

AngularJS Routes: losing content on refresh

本文关键字：路由 刷新 AngularJS      更新时间：2023-09-26

我正在使用AngularJS路由创建一个目录，但我遇到了一个问题。目前，我的目录中有几个部门，所有这些部门都有自己的HTML模板，并且都使用相同的控制器。但是，模板文件都是相同的，唯一的区别是这里的这些行。

 <div id="content" data-ng-init="contentCtrl('MG')">
        <div class="deptName">
            <h2>Management</h2>
        </div>
   
   //rest of content goes here
   
   </div>

所以我想到我可能只使用一个模板文件并像这样为每个部门传递相关的 JSON 文件。

 <div id="content" data-ng-init="contentCtrl(activeDepartment)">
        <div class="deptName">
            <h2>activeDepartment</h2>
        </div>
   
   //rest of content goes here
   
   </div>

到目前为止，该解决方案正在"工作"。但是，当我刷新页面时，它是空白的。我想我知道为什么会发生这种情况，但我不知道如何解决它。我认为这是因为当我刷新页面时，从未设置过 activeDepartment 变量（当您单击主页上的部门时设置）。我能想到解决这个问题的唯一方法是，如果有某种方法在我的路由提供程序中声明一个变量，

如下所示

$routeProvider
            .when('/MG', {
                controller: 'teammateController',
                templateUrl: './assets/departments/department.html',
                activeDepartment = management
            })

但我似乎找不到一种方法来做到这一点，我的做法是错误的吗？任何帮助将不胜感激。

你的"我希望我能这样做"的代码非常接近你实际做这件事的方式！ 你想要：

$routeProvider
  .when('/MG', {
    controller: 'teammateController',
    templateUrl: './assets/departments/department.html',
    resolve: {
      activeDepartment: function() {
        return 'Management';
      }
    }
  })

然后，可以将解析中定义的 activeDepartment 键作为依赖项注入到控制器中，因此您可以在作用域中获取它：

app.controller("teammateController", function(activeDepartment) {
  $scope.deptName = activeDepartment;
  (...etc...)
}

最后在你的模板中，

<div class="deptName"><h2>{{deptName}}</h2></div>

（当然，通常resolve会返回比裸字符串更有趣的东西;基本上，您在solve对象中输入的每个键都可以作为依赖项注入到您碰巧需要它的任何指令，控制器，服务等。

相关文章：