angularjs – 使用$rootscope显示和隐藏

这样做将使我们能够在整个单页Angular应用程序中保持此GlobalCtrl的范围(因为您使用的是ui-router),我们可以避免使用$rootScope(实际上模仿$rootScope的使用).

现在,在GlobalCtrl中定义如下内容：

// Using an object to avoid the scope inheritance problem of Angular
// https://github.com/angular/angular.js/wiki/Understanding-Scopes
$scope.globalData = {showSearchBar: true};

// This callback will be called everytime you change a page using ui-router state
$scope.$on('$stateChangeStart',function(event,toState,toParams) {
    $scope.globalData.showSearchBar = true;

    // Just check for your page where you do not want to display the search bar
    // I'm using just an example like I don't want to display in contac-us page named state
    if (toState.name == 'contact-us' || toParams.foo == "bar") {
        $scope.globalData.showSearchBar = false;
    }
});

现在,在index.html中,只需使用ng-show：

<div ng-show="globalData.showSearchBar">
    <input type="text" ng-model="query" />
</div>