如何在离子框架上动态生成标题？答案

【问题标题】：How can I generate title dynamically on ionic framework?如何在离子框架上动态生成标题？
【发布时间】：2014-06-10 21:59:44
【问题描述】：

我使用离子宠物模板。我有一个关于宠物详细信息页面的问题，如果我想在标题上有一个动态标题，它不会显示任何内容，直到我重新加载页面（使用网络浏览器），但我认为这没有意义，因为我会喜欢做一个应用程序。我有什么想念吗？我能做些什么？

我的代码如下：

<ion-nav-bar class="bar-positive">
<div class="buttons" ng-controller="BackCtrl">
    <a class="button button-icon icon ion-chevron-left" ng-click="$back()"></a>
</div>
<h1 class="title"> {{ current_pet.name }} </h1>

【问题讨论】：

标签： angularjs ionic-framework

【解决方案1】：

如果您碰巧使用的是ion-view，请使用：

<ion-nav-title>
    {{ PageTitle }}
</ion-nav-title>

并把它放在你的ion-content之外。

【讨论】：

这是唯一在 ionic 1.2 上也适用于我的解决方案
'ion-nav-title' is not a known element

【解决方案2】：

在我的应用中我使用了这个：

<ion-view title="{{Properties.Title}}">

Properties 是我范围内的一个对象（我有一种主控制器），我在每个“内部控制器”上“覆盖”。

【讨论】：

这在 Ionic 1.1.1 中对我不起作用（新的 1.2 都不是）-@dk123 的最佳投票答案确实适用于 1.1.1/1.2
@AmirPopovich 我没有投反对票。我刚刚评论了。你不必预测未来，只要看到现在......
如果稍后生成标题似乎不会在加载时及时将其应用于视图，因此显示为空白。下面的 {{ PageTitle }} 建议非常有效。也许我遗漏了一些东西，“我在每个“内部控制器”上“覆盖”的地方是什么意思？
@FrodmanG - 这个答案已经超过三年了。从那时起，离子框架发生了变化，我猜 dk123 的 30 票赞成的答案变得比这个答案更相关。我仍然为这个答案投票，所以我猜人们仍在使用旧版本的 ionic，这确实适合他们。覆盖每个内部控制器意味着您有一个主控制器和嵌套页面（每个页面都有一个控制器，它是一个内部控制器）。内部控制器覆盖该属性。

【解决方案3】：

如果您正在使用并且只想在输入/文本区域被填充（非空）时在标题栏中显示一个按钮，那么您可以执行以下操作。

<ion-header-bar class="bar-light">
  <h1 class="title">{{$root.Title}}</h1>
  <div class="buttons">
    <button class="button button-clear icon ion-checkmark-round" ng-click="" ng-if="$root.Title"></button>
  </div>
</ion-header-bar>

在“离子内容”内部 -

<div class="row>
  <textarea placeholder="" rows="3" maxlength="100" ng-model="$root.Title" ng-trim="false"></textarea>
</div>

否则只在标题栏中使用 ng-if="Title" 将不起作用。

【讨论】：