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>

До сих пор это решение "работает". Однако, когда я обновляю страницу, она пуста. Кажется, я знаю, ПОЧЕМУ это происходит, но я не знаю, как это исправить. Я думаю, что это происходит, потому что когда я обновляю страницу, переменная activeDepartment никогда не была установлена ​​(она устанавливается, когда вы нажимаете на отдел на главной странице). Единственный способ, которым я могу думать, чтобы исправить это, есть ли какой-нибудь способ, чтобы объявить переменную в моем поставщика маршрута вдоль линий

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

Но я не могу найти способ сделать это, я иду об этом неправильно? Любая помощь будет принята с благодарностью.

Answer 1

Ваш код «Желаю, чтобы я мог сделать это вот так» очень близко к тому, как вы на самом деле это делаете! Вы хотите:

$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 будет возвращать что-то более интересное, чем голая строка, конечно, в основном каждый ключ вы положили в объекте решимости будет injectabl e, как зависимость от любой директивы, контроллера, службы и т. д., где вам это понадобится.)