AngularJS - (с использованием Ionic framework) - привязка данных к заголовку заголовка не работает

Я использую библиотеку на основе 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)?


ionic-framework angularjs
person ericbae    schedule 21.01.2014    source источник
comment
Это работает, когда вы не пользуетесь сервисом, а заполняете $scope.content вручную?   -  person Florian F.    schedule 21.01.2014
comment
... да. Значит, это должно быть как-то связано с объектом обещания?   -  person ericbae    schedule 21.01.2014
comment
если у кого-то есть практическое решение, разместите его здесь: stackoverflow.com/questions/29436735/   -  person Simao    schedule 04.04.2015
comment
‹ion-view› ‹ion-nav-title›{{ result.title }}‹/ion-nav-title›   -  person Gautam Menariya    schedule 20.04.2017

Ответы (12)


arrow_upward
10
arrow_downward

Вот рабочий пример того, как это сделать в Ionic. Откройте меню, затем нажмите «О программе». При переходе страницы «О программе» вы увидите заголовок, который был решен.

Как заметил Флориан, для получения желаемого эффекта нужно пользоваться услугой и решительностью. Затем вы вводите возвращенный результат в контроллер. В этом есть некоторые недостатки. Поставщик состояния не изменит маршрут, пока обещание не будет разрешено. Это означает, что может быть заметная задержка между временем, когда пользователь пытается изменить местоположение, и временем, когда это действительно происходит.

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

person Justin Noel    schedule 21.01.2014

arrow_upward
80
arrow_downward

С помощью директивы ion-nav-title (доступно начиная с бета-версии Ionic 14). ), привязка работает корректно.

Скорее, чем

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

Сделай это

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

Работает удовольствие.

person Dunc    schedule 10.02.2015
comment
Это работает в моем случае, когда я устанавливаю заголовок после вызова внешнего API, и это намного проще, чем другие варианты, которые я нашел. - person Guillem Cucurull; 04.11.2015
comment
Почему так себя ведет?! Вы спасли мой день. Спасибо. - person Nikolay Fominyh; 17.05.2016

arrow_upward
11
arrow_downward

Решением для новых версий 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>
person cmrn    schedule 08.12.2015

arrow_upward
7
arrow_downward

Если вы посмотрите на директиву ionic view источник на github, он не отслеживает атрибуты заголовка, что означает, что он не будет обновлять ваше представление, когда вы устанавливаете новое значение.

Директива обрабатывается до того, как вы получите ответ от сервера и заполните $scope.content.title.

Вы действительно должны использовать обещание в своей службе и вызывать его в преобразователе. Или отправьте запрос на включение в ionic.

person Florian F.    schedule 21.01.2014

arrow_upward
4
arrow_downward

Я столкнулся с той же проблемой и смог решить ее, заключив заголовок в двойные завитки.

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

Я должен отметить, что мой page.title устанавливается статически моим контроллером, а не из обещания.

person plong0    schedule 20.03.2014

arrow_upward
4
arrow_downward

У меня была очень похожая проблема, когда заголовок не обновлялся, пока я не переключил страницы пару раз. Если бы я привязал заголовок к другому месту внутри страницы, он сразу же обновился бы. Наконец-то я нашел в ionic docs, что части этих страниц кэшируются. Это описано здесь http://ionicframework.com/docs/api/directive/ionNavView/

Чтобы решить мою проблему, я отключил кеширование для представления с динамическим заголовком:

<ion-view cache-view="false" view-title="{{title}}">
...
</ion-view>
person fantapop    schedule 16.01.2015

arrow_upward
3
arrow_downward

Я заставил это работать на более старых версиях Ionic, используя решение <ion-view title={{myTitle}}> (согласно ответу plong0).

Мне пришлось перейти на <ion-view view-title= в более поздних версиях. Однако при использовании бета-14 он снова показывает пустые заголовки.

Ближайшее решение, которое у меня есть, - это использовать $ionicNavBarDelegate.title(myTitle) непосредственно из контроллера. Когда я запускаю это, он кратко показывает заголовок, а через мгновение гасит его.

Очень расстраивает.

person Kevin Gurden    schedule 08.01.2015
comment
Это не работает для меня, $ionicNavBarDelegate.title() по-прежнему не обновляет мой заголовок, и я безуспешно пробовал атрибут title и view-title. - person jonnie; 10.01.2015
comment
у меня такая же проблема с использованием $ionicNavBarDelegate.title(myTitle) непосредственно с контроллера. Когда я запускаю это, он кратко показывает заголовок, а через мгновение гасит его. - person Andrei Diaconescu; 08.08.2016

arrow_upward
0
arrow_downward

Я впервые работал с динамическим заголовком в Ionic 1.7 и столкнулся с этой проблемой. Поэтому я решил использовать $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');
  }
person BorisGastelu    schedule 10.04.2016

arrow_upward
0
arrow_downward

Используйте ion-nav-title вместо директивы view-title.
см. http://ionicframework.com/docs/api/directive/ionNavTitle/

person Calvin Kei    schedule 05.10.2016

arrow_upward
0
arrow_downward

Это верное решение: данные связываются с директивой 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/

person TaeKwonJoe    schedule 15.03.2017

arrow_upward
0
arrow_downward

Я использую ionic v1.3.3 с шаблоном на основе боковых меню. Я пробовал все решения, приведенные выше, но не повезло. Я использовал делегат из $ionicNavBarDelegate: http://ionicframework.com/docs/v1/api/service/$ionicNavBarDelegate/

Я создал функцию внутри моего углового контроллера, чтобы установить заголовок:

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>
person Abba    schedule 02.04.2017

arrow_upward
0
arrow_downward 

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

Эта работа для меня

person Gautam Menariya    schedule 20.04.2017