web-dev-qa-db-fra.com

AngularJS - (utilisant le cadre ionique) - la liaison de données sur le titre de l'en-tête ne fonctionne pas

J'utilise une bibliothèque basée sur AngularJS appelée "Ionic" ( http://ionicframework.com/ ).

Cela semble simple, mais cela ne fonctionne pas pour moi.

Dans l'un de mes points de vue, j'ai

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

Dans le contrôleur pour la vue ci-dessus, j'ai 

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

Les données de cette vue sont chargées via un simple service HTTP GET (appelé MyService).

Le problème est que quand je regarde cette page, 

<view title="content.title">

N'affiche pas le titre. C'est juste un blanc. Selon la documentation Ionic ( http://ionicframework.com/docs/angularjs/controllers/view-state/ ), je pense que je fais ce qui est bien.

Il est étrange que la partie "{{content.description}}" fonctionne, mais que "content.title" ne fonctionne pas?

Aussi, est-ce parce que je charge le contenu de manière dynamique (via HTTP GET)?

angularjsionic-framework
19
ericbae

Voici un exemple de travail sur la façon de réaliser cela dans Ionic. Ouvrez le menu, puis cliquez sur "À propos de". Lorsque la page "À propos de" transite, vous verrez le titre qui a été résolu.

Comme Florian l'a noté, vous devez utiliser un service et résoudre le problème pour obtenir l'effet souhaité. Vous injectez ensuite le résultat renvoyé dans le contrôleur. Il y a des inconvénients à cela. Le fournisseur d’État ne modifiera pas l’itinéraire jusqu’à ce que la promesse soit résolue. Cela signifie qu'il peut y avoir un décalage notable entre le moment où l'utilisateur tente de changer de lieu et le moment où il se produit.

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

10
Justin Noel

En utilisant la directive ion-nav-title (disponible depuis Ionic beta 14), la liaison semble fonctionner correctement.

Plutôt que

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

Faire ceci

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

Fonctionne un régal.

80
Dunc

Une solution pour les versions plus récentes d'Ionic consiste à utiliser l'élément <ion-nav-title> plutôt que la propriété view-title. Liez simplement votre titre dynamique dans le contenu du <ion-nav-title> en utilisant la syntaxe entre accolades. Exemple:

<ion-view>
    <ion-nav-title>
      {{myViewTitle}}
    </ion-nav-title>
  <ion-content>
    <!-- content -->
  </ion-content>
</ion-view>
11
cmrn

Si vous regardez ionic source de directive de vue sur github , il ne surveille pas les attributs de titre, ce qui signifie qu'il ne mettra pas à jour votre vue lorsque vous définissez une nouvelle valeur.

La directive est traitée avant que vous receviez la réponse du serveur et que vous remplissez $scope.content.title.

Vous devriez en effet utiliser une promesse dans votre service et l'appeler dans un résolveur. Que ou soumettre une demande de traction à ionic .

7
Florian F.

Je rencontrais le même problème et je pouvais le résoudre en enveloppant mon titre de doubles curlies.

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

Je dois noter que mon page.title est défini de manière statique par mon contrôleur plutôt que par une promesse.

4
plong0

J'ai eu un problème très similaire où le titre ne serait pas mis à jour jusqu'à ce que je change de page plusieurs fois. Si je reliais le titre à un autre endroit de la page, il se mettrait à jour immédiatement. J'ai finalement trouvé dans la documentation ionique que des parties de ces pages sont mises en cache. Ceci est décrit ici http://ionicframework.com/docs/api/directive/ionNavView/

Pour résoudre mon problème, j'ai désactivé la mise en cache de la vue avec le titre dynamique:

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

Je travaille sur les anciennes versions d'Ionic avec la solution <ion-view title={{myTitle}}> (selon plong0's answer).

J'ai dû changer pour <ion-view view-title= dans les versions les plus récentes. Cependant, en utilisant la bêta-14, il affiche à nouveau des titres vierges. 

Le plus proche d'une solution consiste à utiliser $ionicNavBarDelegate.title(myTitle) directement à partir du contrôleur. Quand je lance ceci, il montre brièvement le titre et un moment plus tard, le vide. 

Très frustrant.

3
Kevin Gurden

Utilisez ion-nav-title au lieu de la directive view-title.
voir http://ionicframework.com/docs/api/directive/ionNavTitle/

0
Calvin Kei

C'est la vraie solution: les données lient la directive 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>

Ce travail pour moi

0
Gautam Menariya

C'est la première fois que je travaille avec un titre dynamique dans Ionic 1.7 et je rencontre ce problème. J'ai donc résolu l'utilisation de $ionicNavBarDelegate.title(') à partir du contrôleur, comme l'a mentionné Kevin Gurden. Mais en plus, j'ai utilisé cache-view="false".

Vue:

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

Manette:

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

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

  function DemoCtrl($ionicNavBarDelegate) {
    $ionicNavBarDelegate.title('Demo View');
  }
0
BorisGastelu

J'utilise ionic v1.3.3 avec un modèle basé sur les menus latéraux. J'ai essayé toutes les solutions données ci-dessus mais pas de chance. J'ai utilisé le délégué de $ ionicNavBarDelegate: http://ionicframework.com/docs/v1/api/service/ $ ionicNavBarDelegate /

J'ai créé une fonction dans mon contrôleur angulaire pour définir le titre:

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

Ensuite, dans mon code HTML, je viens d'appeler la fonction vm.setNavTitle

 <ion-view overflow-scroll=true ng-init="vm.setNavTitle()">
    <ion-content></ion-content>
 </ion-view>
0
Abba