使用 AngularJS 中的服务共享数据

Question

我正在尝试通过使用服务设置一个变量来根据路由（状态）设置 SPA 的浏览器标题，然后在加载每个页面时由控制器更新该变量。到目前为止，在加载页面时在服务中设置了变量，但是没有为 SPA 更新标题。

我的index.html定义如下；

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="rbApp" ng-controller="mainController as mainVm">
<head>
    <title>{{mainVm.pageTitle}}</title>
    <!-- CSS files used in the application are referenced here -->
</head>

<body>
    <!-- Navigation elements (Bootstrap navbar, mennu items, etc are placed in this section) -->
    <!-- Content -->
    <div ui-view></div>
    <!-- Footer (common elements for the footer are placed here)-->

    <!-- 3rd Party Scripts -->
    <script src="Scripts/jquery-2.1.4.min.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-animate.js"></script>
    <script src="Scripts/angular-resource.min.js"></script>
    <script src="Scripts/angular-ui-router.min.js"></script>

    <!-- Angular Services -->
    <script src="App/Common/common.services.js"></script>

    <!-- Application Scripts -->
    <script src="App/Common/rbApp.js"></script>
    <script src="App/Common/mainController.js"></script>
    <script src="App/WebSite/homeController.js"></script>
</body>
</html>

我的路由在rbApp.js中定义如下；

(function () {
    'use strict';

    var app = angular.module("rbApp", ['ngAnimate', 'ui.router', 'ui.bootstrap', "common.services"]);

    app.config(["$stateProvider", "$urlRouterProvider", "$locationProvider", function ($stateProvider, $urlRouterProvider, $locationProvider) {
        $urlRouterProvider.otherwise("/");

        $stateProvider
        .state("home", {
            url: "/",
            templateUrl: "App/WebSite/home.html",
            controller: "homeController as homeVm"
        })
        /*
            Other states used by the application are entered here...
        */
    }]);
})();

index.html的mainController定义如下；

(function () {
    'use strict';

    angular.module("rbApp").controller("mainController", ["$scope", "sharedServices", mainController]);

    function mainController($scope, sharedServices) {
        var vm = this;

        $scope.$on("updatePageTitle"), function () {
            vm.pageTitle = sharedServices.getPageTitle();
            console.log("Updated 'vm.pageTitle'");
        }
    };
})();

sharedServices服务编码如下；

(function (undefined) {
    "use strict";

    var common = angular.module("common.services", ["ngResource"]);

    common.factory("sharedServices", ["$rootScope", sharedServices]);

    function sharedServices($rootScope) {
        var pageTitle = "";
        var pageName = "";

        var setPageTitle = function (title) {
            pageTitle = "Company Name - " + title;
            console.log("Broadcast 'updatePageTitle'");
            $rootScope.$broadcast("updatePageTitle");
        };
        var getPageTitle = function () {
            return pageTitle;
        };
        var setPageName = function (name) {
            pageName = name;
            $rootScope.$broadcast("updatePageName");
        };
        var getPageName = function () {
            return pageName;
        };
        return {
            setPageTitle: setPageTitle,
            getPageTitle: getPageTitle,
            setPageName: setPageName,
            getPageName: getPageName
        };
    }
})();

并且 homeController 定义为；

(function () {
    "use strict";
    angular.module("common.services").controller('homeController', ["sharedServices", homeController]);

    function homeController(sharedServices) {
        var vm = this;
        sharedServices.setPageTitle("This is the new page title");
    }
})();

console.log 显示 sharedServices 中的变量正在更新，但从未执行 sharedServices.getPageTitle() 函数。

我在其他项目中使用 $rootScope.$broadcast 以这种方式共享数据，但是 mainController 中的 $scope.$on("updatePageTitle") 代码未在此应用程序中触发？

Answer 1

您的代码应该可以正常工作。在您的场景中，与 MainController 关联的 $scope 是 $rootScope 的子项，因此它应该在广播时听到该事件。

似乎发生的事情是您在 MainController 中有一个错字，它没有抛出任何异常。注意 "updatePageTitle":

后错位的右括号

$scope.$on("updatePageTitle"), function () {
    vm.pageTitle = sharedServices.getPageTitle();
    console.log("Updated 'vm.pageTitle'");
}

应该改成这样：

$scope.$on("updatePageTitle", function () {
    vm.pageTitle = sharedServices.getPageTitle();
    console.log("Updated 'vm.pageTitle'");
});

使用 AngularJS 中的服务共享数据

Using a Service in AngularJS to Share Data

angularjs

angular-services