状態変更時にヘッダーの内容を動的に変更する

-1

固定ヘッダーと多数のステートがあります。ステート変更によってヘッダーの内容を変更したい。私のヘッダはindex.html.howにあります。状態変更時にヘッダーの内容を動的に変更する

2016-05-05 Azhar Khan

<body ng-app="app" ng-controller="MainCtrl"> 
    <header ng-if="$state.current.name === 'foo'"></header> 
    <header ng-if="$state.current.name === 'bar'"></header> 

    <!-- or change child elements instead --> 
    <header> 
     <div ng-if="$state.current.name === 'foo'">Hi, I'm foo!</div> 
     <div ng-if="$state.current.name === 'bar'">Hi, I'm bar!</div> 
    </header> 
</body>

出典

2016-05-05 13:29:58 Kyle

あなたがAngularUI Routerを使用する場合は、この

ルータのように行うことができます。

$stateProvider 
    .state('main', { 
     url: '', 
     templateUrl: 'views/main.html', 
     controller: 'MainController' 
    }) 
    .state('main.home', { 
     url: '/', 
     templateUrl: 'views/home.html', 
     controller: 'HomeController', 
     data: { 
     header: 'Home page' 
     } 
    }) 
    .state('main.about', { 
     url: '/about', 
     templateUrl: 'views/about.html', 
     controller: 'About Controller', 
     data: { 
     header: 'About page' 
     } 
    });

HTML：

<body ng-app="app" ng-controller="MainController"> 
    <header> 
     <h1 ng-bind="$state.current.data.header || 'App name'"></h1> 
    </header> 
    <div ui-view></div> 
</body>

出典

2016-05-05 13:39:09

状態変更時にヘッダーの内容を動的に変更する

答えて

関連する問題