javascript - 如何拥有动态内容的静态标题？

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>  

我有这两个 Controller :

var HeaderCtrl;

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

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

    HeaderCtrl = this;

    HeaderCtrl.headerTitle = "aa";
})

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

    HeaderCtrl.headerTitle = "bb";
})

这有效!然而，我的印象是我这样做的方式很糟糕。我的意思是，我可以从 HeaderCtrl 获取空值，对吗？好吧，问题是，在浏览索引(标题所在的位置)之前无法进入“主”屏幕。

我只需要知道我在这里是否做了一些可怕的事情，或者这样就很好。

编辑:

按照使用服务的建议，这就是我所做的:

服务.js:

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

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

    var HeaderService = this;

    HeaderService.HeaderTitle = "";
});

Controller .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";
})

标题 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

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