Почему моя служба повторно инициализируется?

Question

В моем веб-приложении у меня есть меню слева, которое должно быть одинаковым на всех страницах. Кроме того, всякий раз, когда изменяется страница, элемент, который был выбран, должен быть снова выбран при загрузке новой страницы. Для этого я сделал директиву:

menu.html

<div id="sidebar-wrapper" ng-style="style()" fill-height="20"> 
    <ul class="sidebar-nav"> 
     <li class="component-menu" ng-repeat="component in menu.components"> 
      <span> 
       <img src="img/arrow_down_ok.png" /> 
       <span ng-class="{selected: menu.isActive(component.name)}" ng-click="menu.select(component.name,'all')" >{{ component.name }}</span> 
      </span> 
      <ul ng-if="component.devices"> 
       <li class="device-menu" ng-repeat="device in component.devices"> 
        <span ng-class="{selected: menu.isActive(component.name, device.name)}" ng-click="menu.select(component.name,device.name)">{{ device.name }}</span> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

директива меню

var app = angular.module("myApp.directives", ["services"]); 

app.directive("componentMenu", ["menuService", function() { 
    return { 
     restrict: "E", 
     templateUrl: "js/templates/menu.html", 
     controller: function($scope, $location, menuService) { 
      var that = this; 

      this.components = [ { 
       name : "pms", 
       devices : [ {name : "robot"}, {name : "controller"} ] 
      }, { 
       name : "bms", 
       devices : [ {name : "ScanningController"}, {name : "nozzle"} ] 
      }, ]; 
      console.log("menu components:", this.components); 

      menuService.selectedComponent = ""; 
      menuService.selectedDevice = ""; 

      this.select = function(component, device) { 
       device = device || "all"; 
       $location.search("component", component); 
       $location.search("device", device); 
       menuService.selectedComponent = component; 
       menuService.selectedDevice = device; 
       console.log("Menu selected:", menuService.selectedComponent + "/" + menuService.selectedDevice); 
      } 

      this.isActive = function(component, device) { 
       device = device || "all"; 
       return component == menuService.selectedComponent && device == menuService.selectedDevice; 
      } 

      $scope.$watch(function($scope, that) { 
        return $location.url(); 
       }, function(url) { 
        if (url) { 
         var component = menuService.selectedComponent; 
         var device = menuService.selectedDevice; 
         if (!(menuService.selectedComponent == component && menuService.selectedDevice == device)) { 
          that.select(component, device); 
         } 
        } 
       } 
      ); 

     }, 
     controllerAs: "menu", 
    }; 
}]); 

сервис меню

var app = angular.module("myApp.services", []); 

app.factory("menuService", [function() { 
    this._selectedComponent; 
    this._selectedDevice; 

    var menuSelection = { 
      selectedComponent: this._selectedComponent, 
      selectedDevice: this._selectedDevice 
    } 

    return menuSelection; 
}]); 

Всякий раз, когда выбран пункт в меню, консоль правильно отображает выбранный элемент, а затем печатает компоненты меню (что кажется правильным, поскольку URL-адрес изменяется). Но когда загружается страница нового URL-адреса, переменные внутри службы меню снова пустые.

Может ли кто-нибудь объяснить мне, почему это так, поскольку я понял, что услуги являются одиночными и должны сохранять свои ценности.

Answer 1

При использовании службы это связано с новым ключевым словом, поэтому вы привязываете свойства к этому и возвращаете конструктор. Однако вы используете завод. В этом случае вы создаете объект, который вы возвращаете. Поэтому вам нужно, чтобы ваши компоненты были instanciated с var =.