Question

以下是我的观点

  <div ng-if="isMultiChoiceQuestion()">
                <li class="displayAnswer" ng-repeat="choice in getMultiChoice() track by $index" ng-if="isNotEmpty(choice.text.length)">
                            <input type="checkbox" ng-checked="checkForSelection(choice.id)"
                            value="choice.text" disabled="true">
                      <span ng-class="getCSSClass($index, choice.id)">{{choice.text}}</span>
                </li>
              </div>

            <a class="weiter-link" ng-click="flipBack()">Zur Frage</a>

                <div ng-if="isMultiChoiceQuestion()">
                  <!--Changed ng-bind getScore() -> score -->
                      <h4>Bewertung speichern: <span ng-bind="getScore()"></span></h4>
                  <br />
                      <a class="weiter-link" ng-click="incrementOne()">Zur nächsten Frage</a>
                </div>
                  <div ng-if="!isMultiChoiceQuestion()">
                        <h3>Eigene Bewertung: {{score}}</h3>
                        <div class="ranger">
                          <input type="range" max="10" min="0" step="1" id="selfRanger" ng-model="score">
                        </div>
                        <a class="weiter-link" ng-click="submitScore(score)">Bewertung speichern</a>
                            <a class="weiter-link" ng-click="incrementOne()">Zur nächsten Frage</a>
            </div>

上面的视图创建了三个范围。一个是控制器，第二个是第一个div，第二个div是第三个。问题是在控制器中称为得分的属性未在第二个div中使用。

如何让第二个div使用控制器属性而不是自动创建的属性？

JS

app.controller("QuizController", ['total', '$scope', '$rootScope',  'quizDataService',  'QAPointerChange', 'QAScoreList', function (total, $scope, $rootScope, quizDataService, QAPointerChange, QAScoreList) {

  $scope.getScore = function()
      {
          // Makes a call to getCurrentScore and returns a value
          $scope.getCurrentScore();
          return QAScoreList.getSpecificItemScore(QAPointerChange.getQAPointer());
      }
$scope.score = 0;

    $scope.submitScore = function (newScore)
    {
        QAScoreList.setSpecificItemScore(QAPointerChange.getQAPointer(), Number(newScore));
    }


      $scope.getCurrentScore = function()
      {
            $scope.score = QAScoreList.getSpecificItemScore(QAPointerChange.getQAPointer());
      }


}

这不是完整的JS文件。控制器具有负责调用服务以获取分数和其他数据的所有服务。

Answer 1

如果使用嵌套作用域，有两种方法：

点规则

不要使用$scope.score之类的单个变量，而是使用$scope.data.score（您的变量位于范围内的对象中）

控制器为

您不会将变量分配给范围，而是分配给控制器（位于控制器顶部）：

var self = this;
self.score = 5;

在html中：

<div ng-controller="QuizController as ctrl">

你用它：

{{ctrl.score}}

更新

滑块卡住的问题：您的html中有ng-bind="getScore()"，因此每个$ digest周期都会执行getScore。每个$ digest周期都会在需要重绘html时发生（例如当某个范围变量发生变化时）。所以：

滑动滑块$scope.current.score时更改
所以$ digest周期开始
getScore
$scope.current.score已使用QAScoreList函数

getCurrentScore

滑块更改回该值

它没有点规则，因为$scope.score和ng-model="score"都不是同一个变量（它们都在不同的范围内）

所以最好（我假设，在＃34; Bewertung speichern＆＃34;你想显示在范围内选择的相同值，如果不是你需要使用一些不同的变量名称）：< / p>

将ng-bind="getScore()"更改为ng-bind="current.score"
在控制器的开头执行$scope.getScore()以从服务QAScoreList获取当前值

Answer 2

如果你在ng-if内调用你的函数，它只会在条件变为true时才运行该函数，所以getScore()函数不会在第三个div中获得第三个div使用ng-init='getScore()'的输出

如何在AngularJS的所有范围中使用相同的属性值

2 个答案:

点规则

控制器为

更新