在網站上顯示/隱藏某些網頁上的元素

我正在使用AngularUI路由器在我的網站上瀏覽內容。我有一些顯示頁眉/頁腳導航的網頁，有些則沒有。我希望能夠檢測當前頁面的內容，並在需要時插入頁眉/頁腳的HTML。在網站上顯示/隱藏某些網頁上的元素

這是我當前路由器

angular.module('app', ['ui.router']) 
.config(['$urlRouterProvider', '$stateProvider', 
    function($urlRouterProvider, $stateProvider) { 

    $urlRouterProvider.otherwise('/'); 
    $stateProvider 
     .state('home', { 
     url: '/', 
     templateUrl: 'partials/home.html', 
     controller: 'homeCtrl' 
     }) 
     .state('about', { 
     url: '/about', 
     templateUrl: 'partials/about.html', 
     controller: 'aboutCtrl' 
     }) 
     .state('contact', { 
     url: '/contact', 
     templateUrl: 'partials/contact.html', 
     controller: 'contactCtrl' 
     }) 
     .state('create', { 
     url: '/create', 
     templateUrl: 'partials/create.html', 
     controller: 'createCtrl' 
     }) 
     .state('login', { 
     url: '/login', 
     templateUrl: 'partials/login.html', 
     controller: 'loginCtrl' 
     }) 
}]);

對於HTML我有這個

<html ng-app="app"> 
    <body> 

    <!-- *********** HEADER ************* --> 
    <div ng-include=""></div> 

    <!-- ********** CONTENT *********** --> 
    <div ui-view></div> 

    <!-- **************** FOOTER ****************** --> 
    <div ng-include="'partials/standard_footer.html'"></div> 

    </body 
</html>

對於網頁創建並登錄我不想顯示頁眉和頁腳，但我不是當然如何做到這一點。

我想要做這樣的事情，

<div ng-if="!login && !create" ng-include="'standard_header.html'"></div>

我怎樣才能做到這一點？

來源

2016-05-29 Gary Holiday

您可以在$rootScope上公開$state，並使其在您的網頁中可以訪問。然後，您可以簡單地檢查state.current.name != 'login' 象下面這樣： Exposing the current state name with ui router

編輯：什麼我的意思工作Plunker：https://plnkr.co/edit/JDpCo3fTePobuX9Qoxjn

來源

2016-05-29 02:46:01

我新的角度和似乎不能遵循這一點，你能否詳細說明？ –

我已添加plukr作爲例如 –

你幾乎沒有。只需在相應狀態的參數中添加一個標誌：

.state('create', { 
    url: '/create', 
    templateUrl: 'partials/create.html', 
    controller: 'createCtrl', 
    params: { 
    hideHeaderAndFooter: true 
    } 
}) 
.state('login', { 
    url: '/login', 
    templateUrl: 'partials/login.html', 
    controller: 'loginCtrl', 
    params: { 
    hideHeaderAndFooter: true 
    } 
})

然後在控制器中注入$ stateParams服務。 params對象的每一個屬性將被公開爲對象的屬性此服務回報：

loginCtrl.$inject = ['$scope', '$stateParams'] 

function loginCtrl($scope, $stateParams) { 
    $scope.hideHeaderAndFooter = $stateParams.hideHeaderAndFooter 
}

這時你可以用NG-如果只是你的意思的方式來使用它：

<div ng-if="!hideHeaderAndFooter" ng-include="'standard_header.html'"></div>

來源

2016-05-29 02:46:32

在網站上顯示/隱藏某些網頁上的元素

回答

相關問題