Question

假设我有一个包含4个组件的webapplication。就像在那里有一个左侧导航/侧边栏，其中包含指向这4个组件的链接，每当我点击其中一个组件时，主内容div就会以该组件的视图（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;
        }
    }
});

正如你所看到的，我已尝试用服务来解决它。在另一个控制器（在不同的模块中），每当组件的控制器被加载时，我都使用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（）;在每次移动到另一个视图时都会调用sycfCtrl（单击侧栏/导航菜单中的另一个组件）。

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

Answer 1

您有三种选择。

更改标题标签以调用直接检索标题的函数：

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

添加到您的控制器：

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

根本不要使用标题服务，但在每个视图的页面中包含标题栏的模板。您可以通过创建自定义指令来执行此操作，您可以在其中设置标题并在每个视图的模板上包含此指令。它可能看起来像：
```
angular.module('sycf').directive('titleBar',
    function() {
        return {
            restrict: 'EA',
            scope: {
                title: '@'
            },
            templateUrl: 'path/to/title.html'
        };
     });
```
然后，您可以在以下任何地方显示标题：
```
<div title-bar title="Title for this Page" />
```

您可以在sycfCtrl控制器中的标题服务的get（）方法上设置监视：

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

Answer 2

将该标题标记转换为函数：

<div flex>{{Title.set()}}</div>

创建类似于以下内容的服务：

app.factory('Title', function() {
    return {
        set: function(title) {
            title = title;
        }
    };
});

然后将此Title服务注入每个控制器（用于您的组件）并使用它来适当地设置标题：

function Test1Ctrl($scope, Page) {
    Page.setTitle('title1');
}

angular.module('sycf').controller('sycfCtrl', function($scope, Title) {
    Title.set('title goes here');
});

Answer 3

// Put this is title controller
$rootScope.$on("TitleUpdate", function(title) {
    $scope.title = title;
});

// Put this in the setter of title service
$rootScope.$broadcast("TitleUpdate", title);

在另一个模块中的另一个控制器上调用函数时，从模块更新控制器上的$ scope

3 个答案: