[Solved] Variable not being displayed in template

ionic-v1
1

I’m new to both Angular and Ionic, but had (I thought) been getting on quite well with the tutorials etc until now.

I created an app using the tabs starter app in which there is a view that presents a question and the option to respond yes or no. Depending on which answer you pick you get presented with a different question. This all worked fine in the tab based app.

I’ve tried to create the same app, but using the side menu starter app and I just can’t make it work.

This is my template:

<ion-view title="Get Started" >
  <ion-content class="has-header" padding="true" class="content-question">
    <div class="card card-question">          
      <div class="item item-text-wrap">
        {{ question.text }}
      </div>       
    </div> <!-- eo card -->
    <div class="row">
      <div class="col">
        <a class="button icon ion-checkmark button-block button-stable" nav-clear ng-href="#/tab/{{question.template}}/{{question.yes}}">
          Yes
        </a>
      </div>
      <div class="col">
        <a class="button icon ion-close button-block button-stable" nav-clear ng-href="#/tab/{{question.template}}/{{question.no}}">
          No
        </a>
      </div>
    </div>
  </ion-content>
</ion-view>

This is the content of services.js:

angular.module('starter.services', [])


.factory('Questions', function() {

  var questions = [
    { id: 1, text: 'Is there a performance you\'d like to improve? If so, you\'re in the right place.', template: "question", yes: 2, no: 3},
    { id: 2, text: 'Is it something people find really hard to do?'},
    { id: 3, text: 'Does it have a very serious impact on the success of your business or its people?'},
    { id: 4, text: 'Is it something people find hard to learn?'},
    { id: 5, text: 'Is it something that\'s done often?'}
  ];

  return {
    all: function() {
      return questions;
    },
    get: function(questionId) {

      return questions[questionId];
    }
  }
});

These are the controllers I’m using:

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope) {
})


.controller('QuestionsCtrl', function($scope, Questions) {
  $scope.questions = Questions.all();
})

.controller('QuestionSingleCtrl', function($scope, $stateParams, Questions) {
  $scope.question = Questions.get($stateParams.questionId);
});

Here is the state from app.js:

.state('app.questions', {
  url: '/question/:questionId',
  views: {
    'menuContent': {
      templateUrl: 'templates/question.html',
      controller: 'QuestionSingleCtrl'
    }
  }
})

And finally, here is the link in menu.html that I’m using to open the first question:

<ion-item nav-clear menu-close href="#/app/question/1">
    Questions
</ion-item>

The result is that the template does display, but {{ question.text }} is displayed rather than the actual question text. I’m sure I’m missing something obvious, but I don’'t know enough to work out what it is. I’d be grateful for any help.

Barry

2

I knew it had to be something simple. I hadn’t included services.js in the requirements in app.js.

Oh well, that’s something else I’ve learned.

3

can you elaborate ?
i have a similar problem and except i didn’t get the “services.js” part in your comment

4

Sorry, this is three years ago. I can’t even remember what I was trying to do.