Question

我一直在使用一个AngularJS应用程序，我一直在使用Ionic框架作为上周左右的一个重点，我已经遇到了一些障碍。我似乎无法从我在控制器中的范围上设置的一些变量中填充其中一个页面。我写的代码如下。

//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}}部分，但是当我在控制台中查看日志，所有数据都在那里（如下图所示）

我对Ionic框架和AngularJS一般都很陌生，所以如果有人可以建议为什么会这样，我真的很感激。

编辑：已将此项目的代码放入https://github.com/ollyjohn/IONIC_HELP的仓库中非常感谢任何帮助。

Answer 1

您正在两个视图之间共享一个控制器。如果您将helpDummy.html代码放在与questions.html相同的视图中，您会发现它会完美运行（我已对其进行了测试）。

我认为您的问题是，当您重定向到help页面时，您的控制器会重新初始化，从而刷新范围。因此，在questions页面上，您的功能正确执行，并生成正确的数据，但help视图未成功接收。

有多种方法可以解决这个问题。这两个可能是相关的：

您可以在help页面内nested views（使用ui-router），而不是为questions设置单独的视图。因此，您可以在点击帮助图标后显示/隐藏每个问题中的help个详细信息。
您可以为help视图设置单独的控制器，并使用nested controllers。如果将help控制器嵌套在questions控制器中（在同一视图中），child控制器应该可以访问parent $scope个变量。

你也可以使用一种服务，它可以让你在多个控制器之间共享价值/变量，但这对你想要实现的目标来说似乎有些过分。

Answer 2

路由器配置

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>

问题

问题是单击问题页面上的帮助按钮会将视图更改为帮助页面。问题页面的控制器及其范围将被销毁。即使两个视图的控制器相同，也会发生这种情况。 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'
})

内容未放置在AngularJS控制器

2 个答案:

路由器配置

questionsCtrl

helpDummy.html

questions.html

问题

解决方案