javascript - 当在另一个模块中的另一个 Controller 上调用函数时，从模块更新 Controller 上的 $scope

Question

假设我有一个包含 4 个组件的 Web 应用程序。就像有一个左侧导航/侧边栏，其中包含指向这 4 个组件的链接，每当我单击其中一个组件时，主要内容 div 就会更新为该组件的 View (ui-view)。现在，每当我更改为另一个组件时，我想更新页面顶部的标题栏。标题栏是以下模块的一部分(该模块正在标记中使用/它加载所有其他模块):

'use strict';

angular.module('sycf', [
    'ngResource',
    'ui.router',
    'sycf.booksModule',
    'sycf.gamesModule',
    'sycf.moviesModule',
    'sycf.tvModule',
    'sycf.appRoutes'
]);

angular.module('sycf').controller('sycfCtrl', function ($scope,titleService){
    $scope.title = titleService.get();
});

angular.module('sycf').factory('titleService', function () {
    var title = '';

    return {
        set: function (newTitle) {
            console.log("Setting new title.");
            title = newTitle;
        },
        get: function () {
            console.log("Getting new title.");
            return title;
        }
    }
});

正如你所看到的，我尝试通过服务来解决这个问题。在另一个 Controller (在不同的模块中)中，每当加载组件的 Controller 时，我都会使用 titleService.set("something") 。

'use strict';

angular.module('sycf.booksModule', ['ngResource', 'ui.router', 'sycf']);

angular.module('sycf.booksModule').controller('bookCtrl', function ($scope, titleService) {
    $scope.book = "Brave New World"; //testvalue

    titleService.set("Books");
});

现在我不知道如何才能做到这一点，所以 titleService.get();每次我移动到另一个 View (单击侧边栏/导航菜单中的另一个组件)时，都会调用 sycfCtrl 中的函数。

或者可能有一种完全不同的方式可以使这变得更容易。

Answer 1

您有三个选择。

1. 更改标题标签以调用直接检索标题的函数:

   <div flex>{{getTitle()}}</div>
   

   添加到您的 Controller :

   $scope.getTitle = function() {
       return titleService.get();
   }
   

2. 根本不使用标题服务，而是在每个 View 的页面中包含标题栏的模板。您可以通过创建自定义指令来实现此目的，您可以在其中设置标题并将该指令包含在每个 View 的模板中。它可能看起来像:

   angular.module('sycf').directive('titleBar',
       function() {
           return {
               restrict: 'EA',
               scope: {
                   title: '@'
               },
               templateUrl: 'path/to/title.html'
           };
        });
   

   然后，您可以在希望标题出现的位置添加以下内容:

   <div title-bar title="Title for this Page" />
   

3. 您可以在 sycfCtrl Controller 中对标题服务的 get() 方法设置监视:

   $scope.$watch(function() {
       return titleService.get();
   }, function(newTitle) {
       $scope.title = newTitle;
   });