尝试从JSON文件导入数据，并以HTML格式显示

Question

这是我使用的脚本：

(function() {

    var app = angular.module("myQuiz", []);

    app.controller('QuizController', ['$scope', '$http', '$sce', function($scope, $http, $sce){

        $scope.score = 0;
        $scope.activeQuestion = -1;
        $scope.activeQuestionAnswered = 0;
        $scope.percentage = 0;

        $http.get('quiz_data.json').then(function(quizData){

            $scope.myQuestions = quizData.data;
            $scope.totalQuestions = $scope.myQuestions.length;

        });

    }])
})

在此之后，我试图显示总问题＆＃39;在使用{{totalQuestions}}的HTML上，但不是显示问题数量，而是显示{{totalQuestions}}原样。

Answer 1

你在代码中有这个：

(function() {
    var app = angular.module("myQuiz", []);
    // ..
})

但这实际上永远不会执行该函数，因此不会定义您的模块。

最后添加()：

(function() {
    var app = angular.module("myQuiz", []);
    // ..
}())

Answer 2

尝试将<div id="myQuiz">重命名为其他内容，但不能与ng-app="myQuiz"相同，并在<div id="myQuizId" ng-controller = 'QuizController'> {{hereYourVariable}} </div>

中定义范围变量

Answer 3

在index.html文件中添加以下内容：

1. ng-app =“myQuiz”，
2. ng-controller =“QuizController”，如果需要，
3. 添加对您的angular js cdn或其脚本文件的引用
4. 然后在angular cdn / script reference下面添加你的脚本文件引用。