Question

我正在使用一个名为“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）？

Answer 1

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

而不是

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

这样做

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

努力享受。

Answer 2

新版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>

Answer 3

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

正如Florian所说，您需要使用服务并解决以获得所需的效果。然后，将返回的结果注入控制器。这有一些不利因素。在承诺解决之前，状态提供者不会更改路由。这意味着用户尝试更改位置及其实际发生的时间可能会有明显的滞后。

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

Answer 4

如果您查看ionic view directive source on github，则不会在标题属性上观看，这意味着在设置新值时它不会更新您的视图。

在您从服务器收到答案并填写$scope.content.title之前处理该指令。

您确实应该在服务中使用承诺并在解析器中调用它。那或提交a pull request to ionic。

Answer 5

我遇到了同样的问题，并且能够通过将我的标题包装成双层曲线来解决它。

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

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

Answer 6

我有一个非常类似的问题，在我多次切换页面之前标题不会更新。如果我将标题绑定在页面内的另一个位置，它会立即更新。我终于在离子文档中发现这些页面的某些部分是缓存的。这里描述http://ionicframework.com/docs/api/directive/ionNavView/

为了解决我的问题，我使用动态标题为视图启用了缓存：

<ion-view cache-view="false" view-title="{{title}}">
...
</ion-view>

Answer 7

我使用<ion-view title={{myTitle}}>解决方案（根据plong0's答案）使用旧版本的Ionic。

我必须在更新的版本中更改为<ion-view view-title=。然而，使用beta-14它再次显示空白标题。

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

非常令人沮丧。

Answer 8

这是我第一次使用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');
  }

Answer 9

使用ion-nav-title代替指令view-title 见http://ionicframework.com/docs/api/directive/ionNavTitle/

Answer 10

这是真正的解决方案：数据绑定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/

Answer 11

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

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

android:resource-name

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

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);
    }
}

Answer 12

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

这项工作对我来说

AngularJS - （使用Ionic框架） - 标题标题上的数据绑定不起作用

12 个答案: