web-dev-qa-db-ja.com

AngularJS-（Ionic frameworkを使用）-ヘッダータイトルのデータバインディングが機能しない

「Ionic」（ http://ionicframework.com/ ）と呼ばれるAngularJSベースのライブラリを使用しています。

これは簡単に思えますが、私にはうまくいきません。

私の見解の1つでは、

<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を介して）ロードしているためですか？

angularjsionic-framework
19
ericbae

これはIonicでこれを達成する方法の実用的な例です。メニューを開き、「概要」をクリックします。 「概要」ページが移行すると、解決されたタイトルが表示されます。

Florianが指摘したように、サービスを使用して解決を行い、目的の効果を得る必要があります。次に、返された結果をコントローラーに注入します。これにはいくつかの欠点があります。状態プロバイダーは、promiseが解決されるまでルートを変更しません。これは、ユーザーが場所を変更しようとする時間と実際に発生する時間に顕著な遅れがある可能性があることを意味します。

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

10
Justin Noel

ion-nav-title ディレクティブ（Ionic beta 14以降で使用可能）を使用することにより、バインディングが正しく機能しているように見えます。

のではなく

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

これを行う

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

御馳走を働きます。

80
Dunc

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>
11
cmrn

githubのイオンビューディレクティブソース を見ると、タイトル属性を監視していません。つまり、新しい値を設定してもビューが更新されません。

ディレクティブは、サーバーから回答を受け取り、$scope.content.titleを入力する前に処理されます。

実際にサービスでプロミスを使用し、リゾルバーでそれを呼び出す必要があります。それまたは ionicへのプルリクエスト を送信します。

7
Florian F.

私は同じ問題に遭遇し、私のタイトルをダブルカーリーで包むことによってそれを解決することができました。

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

私のpage.titleは、Promiseからではなく、コントローラーによって静的に設定されていることに注意してください。

4
plong0

非常によく似た問題がありましたが、ページを数回切り替えないとタイトルが更新されません。タイトルをページ内の別の場所にバインドすると、すぐに更新されます。私は最終的にionicドキュメントでこれらのページの一部がキャッシュされることを発見しました。これはここで説明されています http://ionicframework.com/docs/api/directive/ionNavView/ =

私の問題を解決するために、動的なタイトルを持つビューのキャッシュをオフにしました：

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

私はこれを古いバージョンのIonic _<ion-view title={{myTitle}}>_ソリューションを使用して動作するようにしました plong0's 回答に従って）。

最近のバージョンでは_<ion-view view-title=_に変更する必要がありました。ただし、ベータ14を使用すると、空白のタイトルが再び表示されます。

私が解決策に最も近いのは、コントローラから直接$ionicNavBarDelegate.title(myTitle)を使用することです。これを実行すると、タイトルが短時間表示され、しばらくすると空白になります。

とてもイライラします。

3
Kevin Gurden

ディレクティブview-titleの代わりにion-nav-titleを使用します。
参照 http://ionicframework.com/docs/api/directive/ionNavTitle/

0
Calvin Kei

これが本当のソリューションです：データは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/

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

この仕事は私にとって

0
Gautam Menariya

Ionic 1.7で動的なタイトルを扱ったのは初めてで、この問題に遭遇しました。そのため、Kevin Gurdenが言及したように、コントローラーから$ionicNavBarDelegate.title(')を使用して解決しました。しかし、さらに、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');
  }
0
BorisGastelu

ionic v1.3.3 with side menus based template。私は上記のすべてのソリューションを試しましたが、うまくいきませんでした。$ ionicNavBarDelegateのデリゲートを使用しました： http：// ionicframework。 com/docs/v1/api/service / $ ionicNavBarDelegate /

タイトルを設定するために、私のangularコントローラ内に関数を作成しました。

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>
0
Abba