AngularJS 路线：刷新时丢失内容

Question

我正在使用 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>

到目前为止这个解决方案是"working"。但是，当我刷新页面时，它是空白的。我想我知道为什么会这样，但我不知道如何解决。我认为它正在发生，因为当我刷新页面时，从未设置 activeDepartment 变量（它是在您单击主页上的部门时设置的）。我能想到解决这个问题的唯一方法是，如果有某种方法可以按照

在我的路由提供程序中声明一个变量

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

但是我似乎找不到办法，我是不是走错了路？任何帮助将不胜感激。

Answer 1

您的 "I wish I could do it like this" 代码非常接近您的实际操作方式！你想要：

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

然后可以将在 resolve 中定义的 activeDepartment 键作为依赖项注入到您的控制器中，因此您可以在范围内获取它：

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

最后在您的模板中，

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

（通常 resolve 会 return 比纯字符串更有趣的东西，当然；基本上你放入解析对象中的每个键都可以作为任何指令、控制器的依赖项注入，在您碰巧需要的地方提供服务等。)

AngularJS 路线：刷新时丢失内容

AngularJS Routes: losing content on refresh

html

javascript

jquery

angularjs

angular-routing