0

I've been muddling through with an AngularJS app I've been working on with the Ionic framework as a bit of a stomping ground for the last week or so and I've hit a bit of a roadblock in as much as I can't seem to get one of the pages to populate from some variables I've set up on the scope in the controller. The code I've written is below.

//THIS IS THE RELEVANT CONTROLLER, THE OTHERS WORK FINE AND DO WHAT I WOULD EXPECT
.controller('questionsCtrl', function($scope) {

    $scope.getHelp = function(id) {
        console.log("Function entered");
        console.log("ID: " + id);
        $scope.getHelpCategory = $scope.questions[id].category;
        console.log("Category: " + $scope.getHelpCategory);
        $scope.getHelpText = $scope.questions[id].hText;
        console.log("Text: " + $scope.getHelpText);
        $scope.getHelpImg = $scope.questions[id].hImg;
        console.log("Image URL: " + $scope.getHelpImg);
    }
    
    $scope.questions = [
        {
            id: 1,
            category: 'Category',
            qText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget?',
            hText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget.',
            hImg: '../images/help/q/help.png'
        },
        {
            id: 2,
            category: 'Category',
            qText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget?',
            hText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget.',
            hImg: '../images/help/q/help.png'
        },
        {
            id: 3,
            category: 'Category',
            qText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget?',
            hText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget.',
            hImg: '../images/help/q/help.png'
        },
        {
            id: 4,
            category: 'Category',
            qText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget?',
            hText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget.',
            hImg: '../images/help/q/help.png'
        },
        {
            id: 5,
            category: 'Category',
            qText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget?',
            hText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget.',
            hImg: '../images/help/q/help.png'
        },
        {
            id: 6,
            category: 'Category',
            qText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget?',
            hText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget.',
            hImg: '../images/help/q/help.png'
        },
        
        {
            id: 7,
            category: 'Category',
            qText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget?',
            hText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget.',
            hImg: '../images/help/q/help.png'
        },
        
        {
            id: 8,
            category: 'Category',
            qText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget?',
            hText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget.',
            hImg: '../images/help/q/help.png'
        },
        
        {
            id: 9,
            category: 'Category',
            qText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget?',
            hText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget.',
            hImg: '../images/help/q/help.png'
        },
        
        {
            id: 10,
            category: 'Category',
            qText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget?',
            hText: 'Lorem praesent sodales mi curabitur dignissim dictumst condimentum vel vestibulum nostra ullamcorper a lacinia a a consectetur dui purus enim congue a parturient fermentum ligula.Sed a torquent a per ullamcorper a nibh parturient a non morbi at ante tincidunt vestibulum nam.Imperdiet sit eget.',
            hImg: '../images/help/q/help.png'
        }
    ]
})
/*THE CSS IS JUST THE STANDARD IONIC CSS FOR THESE PAGES*/
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- THIS IS THE PAGE WHERE THE USER WILL HIT THE HELP BUTTON AND (IN THEORY) GET THE HELP RELEVANT TO THAT QUESTION -->

<ion-view title="Questions">
    <ion-content overflow-scroll="true" padding="true">
        <div class="spacer" style="width:100%; height:25px;"></div>
        <h1>Questions</h1>
        <div>
            <p>
                Please answer the below questions to the best of your ability, providing photographs of relevant items when prompted.
                Failure to answer all questions and thus submitting an invalid form will void your submission and you or someone else may have to go 
                through them all again so please be careful, and tap the help icon (<span class="icon ion-help"></span>) if you need examples.
            </p>
        </div>
        <div class="spacer" style="width: 285px; height: 60px;"></div>
        <div ng-repeat="question in questions">
            <p>
                <strong>QUESTION {{question.id}}</strong><br /><br />{{question.qText}}
            </p>
            <div class="button-bar">
                <button class="button button-stable button-block" style="max-width:43.25%;" ng-click="">Yes</button>
                <button class="button button-stable button-block" style="max-width:43.25%;" ng-click="">No</button>
                <a class="button button-stable button-block button-small icon ion-help"style="max-width: 12.5%;" ng-click="getHelp(question.id)" href="#/help"></a>
            </div>
            <div class="spacer" style="width: 285px; height: 50px;"></div>
        </div>
        <button class="button button-balanced button-block">Submit answers</button>
        <div class="spacer" style="width:100%; height:50px;"></div>
    </ion-content>
</ion-view>

<!-- THIS IS THE HELP PAGE -->
<ion-view title="Help" >
    <ion-content overflow-scroll="true" padding="true">
        <div class="header">
            <h1 class="headerText">Help</h1>
        </div>
        <div class="body">
            <h2>{{ getHelpCategory }}</h2>
            <p>{{ getHelpText }}</p>
            <img ng-src="{{ getHelpImg }}"/>
        </div>
    </ion-content>
</ion-view>

So the issue that I'm having is the {{getHelpCategory}}, {{getHelpText}}, and {{getHelpImg}} parts are not being populated in the page, yet when I look in the console to see the logs, all the data is there (as shown below) Console output for the given function

I'm still quite new to the Ionic framework and AngularJS in general so if anyone could advise as to why this is happening I'd really appreciate it.

EDIT: Have placed the code for this project into my repo at https://github.com/ollyjohn/IONIC_HELP Any help is much appreciated.

Olly John
  • 366
  • 5
  • 20
  • can you provide a plnkr or jsfiddle ? – Anik Islam Abhi Feb 20 '16 at 10:46
  • I'll set one up now, thought I'd put it in a snippet as I read that it was better practice to do so on stack overflow. – Olly John Feb 20 '16 at 10:48
  • Probably easier if I just link you to a repo for it, https://github.com/ollyjohn/IONIC_HELP – Olly John Feb 20 '16 at 10:55
  • Questions without a clear problem statement are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). – georgeawg Feb 20 '16 at 13:05
  • How can I make the problem clearer than I did in the post's title? I don't have a deep enough technical understanding of Angular to make it any more pinpointed – Olly John Feb 21 '16 at 18:58

2 Answers2

1

You are sharing one controller between two views. If you put your helpDummy.html code in the same view as questions.html, you should find that it will work perfectly (I have tested it).

I think your problem is that when your redirect to the help page, your controller is re-initialized, thus refreshing the scope. So on your questions page, your function is executed correctly, and producing the right data, but the help view is not receiving it successfully.

There are multiple ways you could solve this. These 2 may be relevant:

  1. Instead of having a separate view for your help, you could have nested views (using ui-router) within the questions page. So you could show/hide the help details within each question, upon clicking the help icon.
  2. You could have a separate controller for the help view, and use nested controllers. If you nest the help controller within the questions controller (in the same view), the child controller should have access to the parent $scope variables.

You could also use a service, which would allow you to share values/variables across multiple controllers, but that seems like overkill for what you're trying to achieve.

Community
  • 1
  • 1
LJ.Wizard
  • 605
  • 1
  • 6
  • 10
1

Router Config

angular.module('app.routes', [])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider   
    .state('questions', {
      url: '/questions',
      templateUrl: 'templates/questions.html',
      controller: 'questionsCtrl'
    })
    .state('help', {
        url: '/help',
        templateUrl: 'templates/helpDummy.html',
        controller: 'questionsCtrl'
    })
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/login');

});

questionsCtrl

angular.module('app.controllers', [])
  .controller('questionsCtrl', function($scope) {

     $scope.getHelp = function(id) {
        console.log("Function entered");
        console.log("ID: " + id);
        $scope.getHelpCategory = $scope.questions[id].category;
        console.log("Category: " + $scope.getHelpCategory);
        $scope.getHelpText = $scope.questions[id].hText;
        console.log("Text: " + $scope.getHelpText);
        $scope.getHelpImg = $scope.questions[id].hImg;
        console.log("Image URL: " + $scope.getHelpImg);
    }
})

helpDummy.html

<div class="body">
    <h2>{{ getHelpCategory }}</h2>
    <p>{{ getHelpText }}</p>
    <img ng-src="{{ getHelpImg }}"/>
</div>

questions.html

<a class="button ion-help" ng-click="getHelp(question.id)" href="#/help"></a>

The Problem

The problem is that clicking on the help button on the question page changes the view to the help page. The controller for the question page is destroyed along with its scope. This happens even if the controller is the same for both views. Any data stored by the getHelp function gets lost.

The Solution

Re-factor the design to make id a parameter of the route

<a class="button ion-help" ng-href="#/help/{{question.id}}"></a>

JS

.state('help', {
    url: '/help/:id',
    templateUrl: 'templates/helpDummy.html',
    controller: 'helpCtrl'
})
georgeawg
  • 48,608
  • 13
  • 72
  • 95