为什么我的服务会重新初始化？

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

使用服务时，它是用 new 关键字实例化的，这就是将属性绑定到 this 和 return 构造函数的原因。但是，您正在使用工厂。在那种情况下，您创建了一个您 return 的对象。因此，您需要使用 var = 实例化您的组件。

为什么我的服务会重新初始化？

Why does my service reinitialize?

angularjs

angularjs-service