Question

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

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注入您的控制器。

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

2 个答案: