AngularJS：将指令值绑定到通过控制器更改的服务值的最佳方法是什么？

Question

我想创建一个“标题”服务来处理它的标题、按钮和颜色。
主要思想是能够在我的控制器中用一行来自定义这个标题，如下所示：

function HomeCtrl($scope, Header) {
    Header.config('Header title', 'red', {'left': 'backBtn', 'right': 'menuBtn'});
}

所以我创建了一个服务（现在我只关注标题）：

app.service('Header', function() {
    this.config = function(title, color, buttons) {
        this.title = title;
    }
});

...还有一个指令：

app.directive('header', ['Header', function(Header) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="header">{{title}}</div>',
        controller: function($scope, $element, $attrs) {
            $scope.$watch(function() { return Header.title }, function() {
                $scope.title = Header.title;
            });
        }
    };
}]);

所以，这确实有效，但我想知道是否没有更好的方法。 尤其是 Header.title 属性上的 $watch。对我来说似乎不是很干净。

关于如何优化这个的任何想法？

编辑：我的标题不在我的视野中。所以我不能直接从我的控制器更改 $scope 值。

Edit2：这是我的一些标记

<div class="app-container">
    <header></header>

    <div class="content" ng-view></div>

    <footer></footer>
</div>

（不确定这段 html 是否会有所帮助，但我不知道哪个部分实际上会......）

谢谢。

Answer 1

如果您在视图中使用标题，为什么要使用范围来保存对象，而不是服务？这样你就不需要指令来更新 scope.header，因为如果这个对象发生变化，绑定会更新它

   function HomeCtrl($scope, Header) {
     $scope.header = Header.config('Header title', 'red', {'left': 'backBtn', 'right': 'menuBtn'});
    }

并将标题称为

<h1>{{header.title}}</h1>

更新

把这个放在一个控制器中，封装标签绑定到头部：

$scope.$on("$routeChangeSuccess", function($currentRoute, $previousRoute) {
    //assume you can set this based on your $routeParams
    $scope.header = Header.config($routeParams);
});

Answer 2

简单的解决方案可能只是添加到 rootScope。我总是使用每个控制器都需要的一些真正的全局变量来做到这一点，主要是用户登录数据等。

app.run(function($rootScope){
    $rootScope.appData={
            "header" :  {"title" : "foo"}, 
            "user" :{}
    };
});

.. 然后根据需要将 $rootScope 注入您的控制器。