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...
        */
    }]);
})();

mainController的{{1}}定义如下;

index.html

(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中的$scope.$on("updatePageTitle")代码未在此应用程序中触发？

Answer 1

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

似乎正在发生的事情是MainController中有一个拼写错误，但没有任何异常。请注意＆＃34; updatePageTitle＆＃34;：

之后错误放置的近括号

$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中使用服务来共享数据

1 个答案: