小编典典

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

angularjs

我正在使用基于AngularJS的库“
Ionic”(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)?


阅读 212

收藏
2020-07-04

共1个答案

小编典典

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

正如Florian指出的那样,您需要使用一项服务并下定决心以获得预期的效果。然后,您将返回的结果注入到控制器中。这有一些缺点。状态提供商在答应解决之前不会更改路线。这意味着用户尝试更改位置的时间和它实际发生的时间可能会有明显的滞后。

http://plnkr.co/edit/p9b6SWZmBKWYm0FIKsXY?p=预览

2020-07-04