angularjs - style - ng-if
AngularJS-(utilizando el marco Ionic): el enlace de datos en el tÃtulo del encabezado no funciona (12)
Esta es la verdadera solución: los datos vinculan la directiva de 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>
Estoy usando una biblioteca basada en AngularJS llamada "Ionic" ( http://ionicframework.com/ ).
Esto parece simple, pero no funciona para mí.
En uno de mis puntos de vista, tengo lo siguiente
<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>
En el controlador para la vista de arriba, tengo
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!
});
});
Los datos para esta vista se cargan a través de un simple servicio HTTP GET (llamado MyService).
El problema es que cuando veo esta página,
<view title="content.title">
No muestra el título. Es solo un espacio en blanco. De acuerdo con la documentación de Ionic ( http://ionicframework.com/docs/angularjs/controllers/view-state/ ), creo que estoy haciendo lo correcto.
Es extraño que la parte "{{content.description}}" funcione, pero "content.title" no funciona?
Además, ¿es porque estoy cargando el contenido dinámicamente (a través de HTTP GET)?
Aquí hay un ejemplo práctico de cómo lograr esto en Ionic. Abra el menú, luego haga clic en "Acerca de". Cuando la página "Acerca de" transiciones, verá el título que se resolvió.
Como señaló Florian, debe usar un servicio y resolver para obtener el efecto deseado. A continuación, inyecta el resultado devuelto en el controlador. Hay algunas desventajas en esto. El proveedor estatal no cambiará la ruta hasta que se resuelva la promesa. Esto significa que puede haber un retraso notable en el momento en que el usuario intenta cambiar la ubicación y la hora en que realmente ocurre.
Estaba encontrando el mismo problema y pude resolverlo al envolver mi título en doble cresta.
<ion-view title="{{ page.title }}">
Debo señalar que my page.title está siendo establecido estáticamente por mi controlador y no por una promesa.
Tenía un problema muy similar en el que el título no se actualizaba hasta que cambiaba de página un par de veces. Si ligé el título en otro lugar dentro de la página, se actualizaría de inmediato. Finalmente encontré en los documentos iónicos que partes de esas páginas están en la memoria caché. Esto se describe aquí http://ionicframework.com/docs/api/directive/ionNavView/
Para resolver mi problema, cambié el almacenamiento en caché por la vista con el título dinámico:
<ion-view cache-view="false" view-title="{{title}}">
...
</ion-view>
Si observa la fuente de directivas de vista iónica en github , no está mirando los atributos del título, lo que significa que no actualizará su vista cuando establezca un nuevo valor.
La directiva se procesa antes de recibir la respuesta del servidor y usted completa $scope.content.title .
De hecho, debe utilizar una promesa en su servicio y llamarlo en un resolver. Eso o enviar una solicitud de extracción a iónica .
Una solución para las versiones más nuevas de Ionic es usar el elemento <ion-nav-title> lugar de la propiedad view-title . Simplemente enlace su título dinámico dentro del contenido del <ion-nav-title> usando la sintaxis de llaves. Ejemplo:
<ion-view>
<ion-nav-title>
{{myViewTitle}}
</ion-nav-title>
<ion-content>
<!-- content -->
</ion-content>
</ion-view>
Es la primera vez que trabajo con el título dinámico en Ionic 1.7 y me encuentro con este problema. Así que resolví usar $ionicNavBarDelegate.title('') desde el controlador, como lo mencionó Kevin Gurden. Pero, además, utilicé cache-view="false" .
Ver:
<ion-view cache-view="false"></ion-view>
Controlador:
angular
.module(''app'', [])
.controller(''DemoCtrl'', DemoCtrl);
DemoCtrl.$inject = [''$ionicNavBarDelegate''];
function DemoCtrl($ionicNavBarDelegate) {
$ionicNavBarDelegate.title(''Demo View'');
}
Al utilizar la directiva de ion-nav-title (disponible desde Ionic beta 14), el enlace parece funcionar correctamente.
Más bien que
<ion-view title="{{content.title}}">
....
Hacer esto
<ion-view>
<ion-nav-title>{{content.title}}</ion-nav-title>
...
Funciona un placer
Utilice ion-nav-title en lugar de la directiva view-title.
ver http://ionicframework.com/docs/api/directive/ionNavTitle/
Estoy usando iónica v1.3.3 con una plantilla basada en menús laterales. Intenté todas las soluciones dadas anteriormente pero no tuve suerte. Usé el delegado de $ ionicNavBarDelegate: http://ionicframework.com/docs/v1/api/service/ $ ionicNavBarDelegate /
Creé una función dentro de mi controlador angular para establecer el título:
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);
}
}
Luego dentro de mi html acaba de llamar a la función vm.setNavTitle
<ion-view overflow-scroll=true ng-init="vm.setNavTitle()">
<ion-content></ion-content>
</ion-view>
<ion-view> <ion-nav-title>{{ result.title }}</ion-nav-title>
Este trabajo para mí
Lo hice funcionar en versiones anteriores de Ionic usando la solución <ion-view title={{myTitle}}> (según la respuesta de plong0 ).
Tuve que cambiar a <ion-view view-title= en las versiones más recientes. Sin embargo, el uso de beta-14 muestra nuevamente títulos en blanco.
Lo más cercano que tengo a una solución es usar $ionicNavBarDelegate.title(myTitle) directamente desde el controlador. Cuando ejecuto esto, muestra el título brevemente y un momento después lo pone en blanco.
Muy frustrante.