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

Question

我正在使用一个名为"Ionic"的基于AngularJS的库(http://ionicframework.com/).

这看起来很简单,但它对我不起作用.

在我的一个观点中,我有以下内容

<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

如果你在github上查看离子视图指令源,它不会在标题属性上观察,这意味着当你设置一个新值时它不会更新你的视图.

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

您确实应该在服务中使用承诺并在解析器中调用它.那或者向离子提交拉动请求.