javascript - AngularJS Controller 中的内容未放置在页面上

Question

我一直在摸索着一个 AngularJS 应用程序，我一直在使用 Ionic 框架作为一个基础，在过去一周左右的时间里，我遇到了一些障碍我似乎无法从我在 Controller 范围内设置的某些变量中填充其中一个页面。我编写的代码如下。

//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>

所以我遇到的问题是 {{getHelpCategory}}、{{getHelpText}} 和 {{getHelpImg}} code> 部分没有填充在页面中，但是当我在控制台中查看日志时，所有数据都在那里(如下所示)

总的来说，我对 Ionic 框架和 AngularJS 还很陌生，所以如果有人能就为什么会发生这种情况提出建议，我将非常感激。

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

Answer 1

路由器配置

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');

});

问题Ctrl

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>

问题.html

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

<小时/>

问题

问题在于，单击问题页面上的帮助按钮会将 View 更改为帮助页面。问题页面的 Controller 及其范围被销毁。即使两个 View 的 Controller 相同，也会发生这种情况。 getHelp 函数存储的所有数据都会丢失。

解决方案

重构设计，使 id 成为路线的参数

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

JS

.state('help', {
    url: '/help/:id',
    templateUrl: 'templates/helpDummy.html',
    controller: 'helpCtrl'
})