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

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

Ответ 1

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

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

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

Ответ 2

Используя директиву ion-nav-title (доступный с Ionic beta 14), привязка, похоже, работает правильно.

Вместо

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

Сделайте это

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

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

Ответ 3

Решение для более новых версий 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>

Ответ 4

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

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

Вы действительно должны использовать обещание в своей службе и называть его в разрешении. Это или отправить запрос на перенос на ионный.

Ответ 5

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

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

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

Ответ 6

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

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

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

Ответ 7

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

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

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

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

Ответ 8

Это первый раз, когда я работал с динамическим заголовком в 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');
  }

Ответ 9

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

Ответ 10

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

Ответ 11

I m с использованием ионного v1.3.3 с шаблоном на основе боковых меню. Я пробовал все приведенные выше решения, но не повезло. Я использовал делегата из $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>

Ответ 12

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

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