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并返回构造函数的原因。但是你正在使用工厂。在这种情况下，您将创建一个返回的对象。因此，您需要使用var =实现组件。

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

1 个答案: