19

我正在使用一个名为“Ionic”（http://ionicframework.com/）的基于 AngularJS 的库。

这看起来很简单，但它对我不起作用。

在我的一种观点中，我有以下几点

<view title="content.title">
  <content has-header="true" padding="true">
    <p>{{ content.description }}</p>
    <p><a class="button button-small icon ion-arrow-left-b" href="#/tab/pets"> Back to home</a></p>
  </content>
</view>

在上述视图的控制器中，我有

angular.module('App', []).controller('DetailCtrl', function($scope, $stateParams, MyService) {
  
  MyService.get($stateParams.petId).then(function(content) {
    $scope.content = content[0];
    console.log($scope.content.title); // this works!
  });
});

该视图的数据是通过一个简单的 HTTP GET 服务（称为 MyService）加载的。

问题是当我查看这个页面时，

<view title="content.title">

不显示标题。这只是一个空白。根据 Ionic 文档（http://ionicframework.com/docs/angularjs/controllers/view-state/），我认为我做对了。

奇怪的是，这{{content.description}}部分有效，但content.title不起作用？

另外，是因为我正在动态加载内容（通过 HTTP GET）吗？

4

12 回答 12

80

通过使用ion-nav-title指令（自 Ionic beta 14 起可用），绑定似乎可以正常工作。

而不是

<ion-view title="{{content.title}}">
    ....

做这个

<ion-view>
    <ion-nav-title>{{content.title}}</ion-nav-title>
    ...

工作一种享受。

于 2015-02-10T14:02:05.753 回答
11

较新版本的 Ionic 的解决方案是使用<ion-nav-title>元素而不是view-title属性。只需将您的动态标题绑定在<ion-nav-title>使用大括号语法的内容中。例子：

<ion-view>
    <ion-nav-title>
      {{myViewTitle}}
    </ion-nav-title>
  <ion-content>
    <!-- content -->
  </ion-content>
</ion-view>
于 2015-12-08T03:51:44.267 回答
10

这是一个如何在 Ionic 中完成此操作的工作示例。打开菜单，然后单击“关于”。当“关于”页面转换时，您将看到已解决的标题。

正如弗洛里安所说，您需要使用服务并解决问题才能获得所需的效果。然后将返回的结果注入控制器。这有一些不利的一面。在 promise 解决之前，状态提供者不会更改路由。这意味着用户尝试更改位置的时间和实际发生的时间可能存在明显的滞后。

http://plnkr.co/edit/p9b6SWZmBKWYm0FIKsXY?p=preview

于 2014-01-21T17:53:50.737 回答
7

如果您查看 github 上的 ionic view 指令源，它不会关注标题属性，这意味着当您设置新值时它不会更新您的视图。

在您从服务器收到答案并填写$scope.content.title.

您确实应该在您的服务中使用承诺并在解析器中调用它。或者向ionic 提交拉取请求。

于 2014-01-21T12:46:12.883 回答
4

我遇到了同样的问题，并且能够通过将我的标题包裹在双卷曲中来解决它。

<ion-view title="{{ page.title }}">

我应该注意到我的 page.title 是由我的控制器静态设置的，而不是来自一个承诺。

于 2014-03-20T01:54:38.653 回答
4

我有一个非常相似的问题，直到我切换页面几次，标题才会更新。如果我将标题绑定在页面内的另一个位置，它会立即更新。我终于在 ionic 文档中发现这些页面的一部分被缓存了。这在这里描述http://ionicframework.com/docs/api/directive/ionNavView/

为了解决我的问题，我为具有动态标题的视图关闭了缓存：

<ion-view cache-view="false" view-title="{{title}}">
...
</ion-view>
于 2015-01-16T09:37:29.293 回答
3

我使用该<ion-view title={{myTitle}}>解决方案在旧版本的 Ionic 上工作（根据plong0 的回答）。

我不得不更改为<ion-view view-title=更新的版本。但是使用 beta-14 它再次显示空白标题。

我最接近的解决方案是$ionicNavBarDelegate.title(myTitle)直接从控制器使用。当我运行它时，它会简短地显示标题，稍后将其空白。

非常令人沮丧。

于 2015-01-08T12:08:38.217 回答
0

这是我第一次在 Ionic 1.7 中使用动态标题，我遇到了这个问题。所以我解决$ionicNavBarDelegate.title(')了使用控制器的问题，正如 Kevin Gurden 所提到的。但另外，我使用了cache-view="false".

看法：

<ion-view cache-view="false"></ion-view>

控制器：

angular
  .module('app', [])
  .controller('DemoCtrl', DemoCtrl);

  DemoCtrl.$inject = ['$ionicNavBarDelegate'];

  function DemoCtrl($ionicNavBarDelegate) {
    $ionicNavBarDelegate.title('Demo View');
  }
于 2016-04-10T09:31:54.600 回答
0

使用 ion-nav-title 而不是指令 view-title。
见http://ionicframework.com/docs/api/directive/ionNavTitle/

于 2016-10-05T07:33:46.530 回答
0

这是真正的解决方案：数据绑定 ion-nav-title 指令

<ion-view>
  <ion-nav-title ng-bind="content.title"></ion-nav-title>
  <ion-content has-header="true" padding="true">
    <p>{{ content.description }}</p>
    <p><a class="button button-small icon ion-arrow-left-b" href="#/tab/pets"> Back to home</a></p>
  </ion-content>
</ion-view>

http://ionicframework.com/docs/api/directive/ionNavTitle/

于 2017-03-15T04:24:45.057 回答
0

我正在使用带有基于侧边菜单的模板的 ionic v1.3.3。我尝试了上面给出的所有解决方案，但没有运气。我使用了来自 $ionicNavBarDelegate 的委托：http: //ionicframework.com/docs/v1/api/service/ $ionicNavBarDelegate/

我在我的角度控制器中创建了一个函数来设置标题：

angular.module('app.controllers').controller('contributionsCtrl',  contributionsCtrl);

function contributionsCtrl($scope, $ionicNavBarDelegate) {

    vm.setNavTitle = setNavTitle;


    function setNavTitle() {
        var title = "<span class='smc_color'> <i class='icon ion-images'></i> Your Title </span>"
        $ionicNavBarDelegate.title(title);
    }
}

然后在我的 html 中调用函数 vm.setNavTitle

 <ion-view overflow-scroll=true ng-init="vm.setNavTitle()">
    <ion-content></ion-content>
 </ion-view>
于 2017-04-02T02:48:25.540 回答
0 
<ion-view> <ion-nav-title>{{ result.title }}</ion-nav-title>

这对我有用

于 2017-04-20T07:20:38.197 回答