Question

这是HTML（片段）：

<div class="header" ng-controller="Header" ng-hide="hideHeader"></div>
<div class="page" ng-view></div>

.header始终具有相同的控制器，而.page根据路线具有不同的控制器。

问题是在控制器中为当前URL设置了hideHeader。

告诉Header控制器当前路由的控制器是否已更改hideHeader的值的最佳方法是什么？

我不认为在$routeScope上设置它是正确的方法。此外，大多数情况下，标题将是可见的，很少有页面想要隐藏它。

另一个想法是在config()方法中设置该变量：

$routeProvider
.when('/',
{
    templateUrl:'views/hello.html',
    controller:'Hello',
    hideHeader:true
});

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

什么是我最好的选择？

谢谢。

Answer 1

我倾向于服务，因为Angular团队表示“有两个想要访问相同数据的控制器是您想要服务的经典标志。”（其中一个地方提到这是他们的Angular Best Practices讨论：http://www.youtube.com/watch?v=ZhfUv0spHCY）。他们还讨论了服务是共享状态的正确位置（瘦控制器是“视图和服务之间的粘合剂”）。

所以，有这样的事情：

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

这是一个小提琴：http://jsfiddle.net/Yxbsg/1/

或可能会使用值：

myApp.value('headerStatus',true);

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

Answer 2

您可以在标题控制器中侦听$locationChangeStart或$locationChangeSuccess个事件，然后根据网址中的更改隐藏它。

http://docs.angularjs.org/api/ng。$位置

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

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

2 个答案: