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

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

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

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

…和一项指令：

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;
            });
        }
    };
}]);

app.directive（'header'，['header'，函数（header）{
返回{
限制：'E'，
替换：正确，
模板：“{{title}}”，
控制器：函数（$scope、$element、$attrs）{
$scope.$watch（函数（）{return Header.title}，函数（）{
$scope.title=Header.title；
});
}
};
}]);

所以，这实际上是可行的，但我想知道是否有更好的方法来做到这一点。 尤其是Header.title属性上的$watch。对我来说似乎不太干净

你知道如何优化这个吗

编辑：我的标题不在我的视图中。因此，我不能直接从控制器更改$scope值

编辑2：这是我的一些标记

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

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

    <footer></footer>
</div>

（不确定这段html是否有用，但我不知道哪一部分会有用…）

---

谢谢。

如果您在视图中使用title，为什么要使用scope来保存对象，而不是服务？这样，您就不需要使用指令来更新scope.header，因为如果此对象发生更改，绑定将更新它

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

并将标题称为

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

---

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

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

---

。。然后在保证的情况下将$rootScope注入控制器。

因为标头不在我的ng-view中。它不必是。。你也可以发布你的标记吗？这是一个移动应用程序。页眉和页脚不在我的视图中，所以我不需要用它“污染”我的模板。我想这是不太灵活，但更干燥。对不起，我误解了你的评论。我将用一些标记更新我的帖子。实际上，这是我在搜索更干净的解决方案之前所做的：）我不确定这是最佳实践（使用$rootScope）。此外，我希望能够在控制器中的一行中配置我的标题，以便使其简短。一个专门的服务似乎是一个好主意。从AngularJS常见问题解答中可以看出：偶尔会有一些数据是你想在整个应用程序中实现全局化的。对于这些，您可以注入$rootScope并像其他任何作用域一样在其上设置值。由于作用域继承自根作用域，这些值将可用于附加到指令（如ng show）的表达式，就像本地$scope上的值一样。还有从角度上的常见问题。。。“相反，不要创建一个服务，它的唯一目的是存储和返回数据位”该死，这正是我正在做的（使用服务只返回数据位）。。。那么，如果我不想在我的每个控制器中都有3或4$rootScope.myvar=myvalue，还有其他解决方案吗？可能会使用事件在控制器之间传递消息吗？（尽管我认为您最初使用$rootScope的方法很好）$rootScope.$broadcast（“HeaderConfigureQuest”，{…}）；还有你的头控制器$关于（“HeaderConfigureQuest”，函数…）

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

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