Angularjs 在分层相等的控制器之间发送消息

这是HTML（片段）：

然而，我不确定这是一种正确的“AngularJS”方式

我最好的选择是什么

---

谢谢。

您可以在标头控制器中侦听

$locationChangeStart

或

$locationChangeSuccess

事件，然后根据url中的更改将其隐藏

.$地点

来自AngularJS API文档

$locationChangeStart

Broadcasted before a URL will change. This change can be prevented by calling   preventDefault method of the event. See ng.$rootScope.Scope#$on for more details about  event object. Upon successful change $locationChangeSuccess is fired.

Type:
broadcast

Target: 
root scope

Parameters
Param   Type    Details

angularEvent    Object    Synthetic event object.

newUrl: string    New URL

oldUrl:    (optional)    string    URL that was before it was changed.

编辑

angular.module('myApp',[]).config(['$routeProvider',function($routeProvider){
    // application routes here
}).run(['$rootScope','$location',function($rootScope,$location){
    $rootScope.$on('$locationChangeStart',function(evt,newPath,oldPath){
        switch(newPath){
            case '/some/path':
            case '/some/other/path':
            case '/some/more/paths':
                $rootScope.$broadcast('header.hide');
                break;
            default:
                $rootScope.$broadcast('header.show');
                break;
        }
    });
}])
.controller('HeaderCtrlr',['$scope',function($scope){
    $scope.hideFlag = false;

    $scope.$on('header.hide',function(){
        $scope.hideFlag = true;
    });

    $scope.$on('header.show',function(){
        $scope.hideFlag = false;
    });
}]);

---

您可以在标头控制器中侦听

$locationChangeStart

或

$locationChangeSuccess

事件，然后根据url中的更改将其隐藏

.$地点

来自AngularJS API文档

$locationChangeStart

Broadcasted before a URL will change. This change can be prevented by calling   preventDefault method of the event. See ng.$rootScope.Scope#$on for more details about  event object. Upon successful change $locationChangeSuccess is fired.

Type:
broadcast

Target: 
root scope

Parameters
Param   Type    Details

angularEvent    Object    Synthetic event object.

newUrl: string    New URL

oldUrl:    (optional)    string    URL that was before it was changed.

编辑

angular.module('myApp',[]).config(['$routeProvider',function($routeProvider){
    // application routes here
}).run(['$rootScope','$location',function($rootScope,$location){
    $rootScope.$on('$locationChangeStart',function(evt,newPath,oldPath){
        switch(newPath){
            case '/some/path':
            case '/some/other/path':
            case '/some/more/paths':
                $rootScope.$broadcast('header.hide');
                break;
            default:
                $rootScope.$broadcast('header.show');
                break;
        }
    });
}])
.controller('HeaderCtrlr',['$scope',function($scope){
    $scope.hideFlag = false;

    $scope.$on('header.hide',function(){
        $scope.hideFlag = true;
    });

    $scope.$on('header.show',function(){
        $scope.hideFlag = false;
    });
}]);

---

我倾向于服务，因为Angular团队指出：“拥有两个想要访问相同数据的控制器是您想要服务的典型标志。”（他们在Angular最佳实践讨论中提到了这一点：）。他们还讨论了服务是共享状态的正确位置（瘦控制器是“视图和服务之间的粘合剂”）

所以，要么像这样：

myApp.service('headerStatus', function () {
    var hideHeader = true;

    this.hideHeader = function() {
        return hideHeader;
    };

    this.setHeader = function(visibility) {
        hideHeader = visibility;
    };
});

然后有很多方法可以与之结合，但这里有一个简单的方法：

myApp.controller('Header', function ($scope,headerStatus) {
   $scope.hideHeader = headerStatus.hideHeader();
});

还有一把小提琴：

或您可能会使用一个值：

myApp.value('headerStatus',true);

myApp.controller('Header', function ($scope,headerStatus) {
    $scope.hideHeader = headerStatus;
});

---

我倾向于服务，因为Angular团队指出：“拥有两个想要访问相同数据的控制器是您想要服务的典型标志。”（他们在Angular最佳实践讨论中提到了这一点：）。他们还讨论了服务是共享状态的正确位置（瘦控制器是“视图和服务之间的粘合剂”）

所以，要么像这样：

myApp.service('headerStatus', function () {
    var hideHeader = true;

    this.hideHeader = function() {
        return hideHeader;
    };

    this.setHeader = function(visibility) {
        hideHeader = visibility;
    };
});

然后有很多方法可以与之结合，但这里有一个简单的方法：

myApp.controller('Header', function ($scope,headerStatus) {
   $scope.hideHeader = headerStatus.hideHeader();
});

还有一把小提琴：

或您可能会使用一个值：

myApp.value('headerStatus',true);

myApp.controller('Header', function ($scope,headerStatus) {
    $scope.hideHeader = headerStatus;
});

---

当然，这是一个选择，但它似乎太复杂了，不适合更简单的事情。这意味着我的头控制器知道哪些路径应该有头等等。而且，我没有否决你的答案。：）它不必位于标头控制器中，您可以在应用程序模块上的

run

函数中设置侦听器，并使其

$broadcast

显示一条关于是否隐藏只有标头控制器侦听的消息。这样，你的头控制器就不需要路径信息了。当然，这是一个选项，但对于一些简单的东西来说，它似乎太复杂了。这意味着我的头控制器知道哪些路径应该有头等等。而且，我没有否决你的答案。：）它不必位于标头控制器中，您可以在应用程序模块上的

run

函数中设置侦听器，并使其

$broadcast

显示一条关于是否隐藏只有标头控制器侦听的消息。这样你的头控制器就不需要有路径信息了。这一点很好。我有点不愿意使用服务来实现这一点，因为基本上这只是每次路由更改一次的事情，而Header控制器基本上从不更改该值。只有几个（2-3）控制器可以改变它。此外，服务和值的问题是，需要标头的视图必须通过将其设置为false来声明。我想知道是否有一种方法可以只为想要更改它的路由设置它，而不需要在有它的路由中取消设置。不确定这是否有意义。是的，很有趣。这让我思考谁应该拥有关于哪些路线有头的知识。我想到两个主意。您可以拥有一个自己的服务，因此它包括一个列表，其中列出了哪些路由需要一个标头。然后，服务将检查在设置可见性时当前处于活动状态的路线。这种中央集权有利有弊。或者，正如您在问题中提到的，您可以让路由提供商拥有它。不确定什么对你最合适——我真的会考虑，考虑到你的整个架构，谁会觉得自己是知识的逻辑拥有者。但我不能决定哪一个更合适。每个路由的配置都有一个关于这一点的标志是有意义的，但我对路由数据中有一种数据不是100%满意。我个人不介意路由设置需要一个头的想法。但是我很想让它向服务注册这些信息，这样路由就不会直接控制视图。如果将来事情变得更复杂，你可以使用服务来处理。而且，它可以让其他阅读您代码的人更清楚地了解发生了什么，因为服务拥有头状态。这是一个相当好的折衷方案。我会再等一会儿，看看是否有一个完美的解决方案，我们还没有考虑过。很好。我有点不愿意使用服务来实现这一点，因为基本上这只是每次路由更改一次的事情，而Header控制器基本上从不更改该值。只有几个（2-3）控制器可以改变它。此外，服务和值的问题是，需要标头的视图必须通过将其设置为false来声明。我想知道是否有一种方法可以只为想要更改它的路由设置它，而不需要在有它的路由中取消设置。不确定这是否有意义。是的，很有趣。这让我思考谁应该拥有关于哪些路线有头的知识。我想到两个主意。您可以拥有一个自己的服务，因此它包括一个列表，其中列出了哪些路由需要一个标头。然后，服务将检查在设置可见性时当前处于活动状态的路线。这种中央集权有利有弊。或者，正如您在问题中提到的，您可以让路由提供商拥有它。不确定什么对你来说是最好的——我真的会考虑，考虑到你的整个架构，谁会觉得自己是这些知识的逻辑所有者