如何让静态 header 包含动态内容？

Question

所以，我的 XML 中有这个静态 header:

<ion-header-bar class="bar-positive has-tabs-top" ng-controller="HeaderCtrl as header">
  <h3 class="title">{{ header.headerTitle }}</h3>
</ion-header-bar>

我有那两个控制器：

var HeaderCtrl;

angular.module('ido.controllers', [])

.controller("HeaderCtrl", function HeaderFunctions(){

    HeaderCtrl = this;

    HeaderCtrl.headerTitle = "aa";
})

.controller("MainCtrl", function MainFunctions() {

    HeaderCtrl.headerTitle = "bb";
})

这行得通！但是，我的印象是我这样做很糟糕。我的意思是，我可以从 HeaderCtrl 中得到一个空值，对吧？好吧，问题是，在通过 Header 所在的索引之前，无法进入 "Main" 屏幕。

我只需要知道我在这里做的是糟糕的事情还是没问题。

编辑：

根据使用服务的建议，我是这样做的：

services.js:

angular.module('ido.services', [])

.service("HeaderService", function SetHeaderTitle() {

    var HeaderService = this;

    HeaderService.HeaderTitle = "";
});

controllers.js:

angular.module('ido.controllers', [])

.controller("HeaderCtrl", function HeaderFunctions(HeaderService){

    var HeaderCtrl = this;

    HeaderCtrl.HeaderService = HeaderService;

    HeaderCtrl.HeaderService.HeaderTitle = "Login Header";
})

.controller("MainCtrl", function MainFunctions(HeaderService) {

    var MainCtrl = this;

    MainCtrl.HeaderService = HeaderService;

    MainCtrl.HeaderService.HeaderTitle = "Main";
})

Header HTML:

<ion-header-bar class="bar-positive has-tabs-top" ng-controller="HeaderCtrl as HeaderCtrl">
  <h3 class="title">{{ HeaderCtrl.HeaderService.HeaderTitle }}</h3>
</ion-header-bar>

Answer 1

$ngRoute 是你需要完成的。这里是ngRoute Docs

Answer 2

您可以使用服务在控制器之间共享数据。将全局变量保持在绝对最小值。

如何让静态 header 包含动态内容？

How to have a static header with dynamic content?

html

javascript

angularjs

ionic-framework