Data no share between views

ionic-v1
1

Hi, I have a problem, I’m consuming a json and at first view everything looks fine, but when the data passed to the second view data does not appear. I show my code:

controllers.js

app.service('ultimasService', function($http) {
  var noticias = [];
  return {
    GetNoticias: function() {
      return $http.get("xxxxx?callback=JSON_CALLBACK").then(function(response){
          noticias = response.data;
          return response.data;
      });
    },
    GetNoticia: function(noticiaId) {
      for(i=0;i<noticias.length;i++){
          if(noticias[i].id == noticiaId){
              return noticias[i];
          }
      }
    }
  }
});



app.controller('ultimasCtrl', function(ultimasService,$scope,$timeout) {
  $scope.showLoading();
  ultimasService.GetNoticias().then(function(noticias){
      console.log(noticias);
      $scope.noticias = noticias;
      $scope.hideLoading();
  });
  $timeout(function(){ 
    $scope.hideLoading();
  },5000);

});

app.controller('ultimasDetailCtrl', function($routeParams,ultimasService,$scope) {
   var noticiaId = $routeParams.id;
    $scope.noticia = ultimasService.GetNoticia(noticiaId);
});

app.js

.state('app.ultimasNoticias', {
      url: "/ultimasNoticias",
      views: {
        'menuContent' :{
          templateUrl: "templates/ultimasNoticias.html",
          controller: 'ultimasCtrl'
        }
      }
    })

    .state('app.ultimasNoticiasDetail', {
      url: "/ultimasNoticiasDetail/:noticiaId",
      views: {
        'menuContent' :{
          templateUrl: "templates/ultimasNoticiasDetail.html",
          controller: 'ultimasDetailCtrl'
        }
      }
    })

first view

<ion-view title="Últimas Noticias">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="sombraInterna">

    <div>
    	<div class="card" ng-repeat="noticia in noticias"> 
        <ul>
           <li class="arrow">
            <a href="#/app/ultimasNoticiasDetail/{{noticia.id}}">
               <div>
                 <span class="item item-thumbnail-unaLinea">
                   <img src="xxxxx/{{noticia.Imagen}}">
                   <p class="padding-vertical"><b>{{noticia.Titulo}}</b></p>
                 </span>            
               </div>
              <p align="justify" class="padding-horizontal" ng-bind-html="noticia.DescripcionLarga | hrefToJS"></p>
            </a>
          </li>
        </ul>
    	</div>      
    </div>
  
  </ion-content>
</ion-view>

second view

<ion-view title="Últimas Noticias">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="sombraInterna">

    <div>
      <div class="card">
        <center>
          <h3 class="padding-vertical">{{noticia.Titulo}}</h3>
          <img style="max-width:100%;" src="xxxxx/{{noticia.Imagen}}">
        </center>
        <p align="justify" class="padding">{{noticia.DescripcionLarga}}</p>
      </div>
    </div>
  
  </ion-content>
</ion-view>

The error is: noticias.id is undefined.

Thanks for your help.

2

Your second state-param:
noticiaId

in the controller:
$routeParams.id

:wink:

3

I don´t understand your answer…

4

You are trying to get a state parameter that does not exist.

in your state definition you call it noticiaId and in your controller you try to get it over “id”

State: ‘app.ultimasNoticiasDetail’
url: "/ultimasNoticiasDetail/:noticiaId"

Controller:
var noticiaId = $routeParams.id;

A little hint:
ionic is using ui-router to define states and handle them.
There for you should use $state or $stateParams instead of $routeParams.

Greetz

2 Likes
6

Ok, I have solved the problem:

I followed your hint. I used the same code in my first question, and I changed this line in app.js:

url: "/ultimasNoticiasDetail/:noticiaId",

for this

url: "/ultimasNoticiasDetail/:id",

And I used $stateParams instead $routeParams.

Thank you very very much, @bengtler !!!