Question

我正在关注这个AngularJS + ASP.NET教程（http://www.asp.net/web-api/tutorials/hands-on-labs/build-a-single-page-application-(spa)-with-aspnet-web-api-and-angularjs）并且他们使用了$ scope，但是我试图用新的语法替换它＃＆n;控制器＆＃39;如。（检查AngularJs "controller as" syntax - clarification?后）

我做了什么，此刻没有工作，因为页面在nextQuestion（）函数中调用了$ http.get，但视图仍然与标题＆＃34;加载问题相同。 ..＆＃34;

我的代码：

JS http://pastebin.com/RfngRuZD

var app = angular.module('QuizApp', [])

app.controller('QuizCtrl', ['$http', function ($http) {
    this.answered = false;
    this.title = "loading question...";
    this.options = [];
    this.correctAnswer = false;
    this.working = false;

    this.answer = function () {
        return this.correctAnswer ? 'correct' : 'incorrect';
    };

    // GET
    this.nextQuestion = function () {
        this.working = true;
        this.answered = false;
        this.title = "loading question...";
        this.options = [];

        $http.get('/api/trivia').success(function (data, status, headers, config) {
            this.options = data.options;
            this.title = data.title;
            this.answered = false;
            this.working = false;
        }).error(function (data, status, headers, config) {
            this.title = "Oops... something went wrong.";
            this.working = false;
        });
    };

    // POST
    this.sendAnswer = function (option) {
        this.working = true;
        this.answered = true;

        $http.post('/api/trivia', { 'questionId': option.questionId, 'optionId': option.id }).success(function (data, status, headers, config) {
            this.correctAnswer = (data === "true");
            this.working = false;
        }).error(function (data, status, headers, config) {
            this.title = "Oops... something went wrong.";
            this.working = false;
        });
    };
}]);

Index.cshtml http://pastebin.com/YmV1hwcU

@{
    ViewBag.Title = "Play";
}

<div id="bodyContainer" ng-app="QuizApp">
    <section id="content">
        <div class="container">
            <div class="row">
                <div class="flip-container text-center col-md-12" ng-controller="QuizCtrl as quiz" ng-init="quiz.nextQuestion()">
                    <div class="back" ng-class="{flip: quiz.answered, correct: quiz.correctAnswer, incorrect: !quiz.correctAnswer}">

                    <p class="lead">{{quiz.answer()}}</p>
                    <p>
                        <button class="btn btn-info btn-lg next option" ng-click="quiz.nextQuestion()" ng-disabled="quiz.working">Next Question</button>
                    </p>
                </div>
                    <div class="front" ng-class="{flip: quiz.answered}">
                        <p class="lead">{{quiz.title}}</p>
                        <div class="row text-center">
                            <button class="btn btn-info btn-lg option"
                                ng-repeat="option in quiz.options" ng-click="quiz.sendAnswer(option)" ng-disabled="quiz.working">
                                {{option.title}}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@section scripts{
    @Scripts.Render("~/Scripts/angular.js")
    @Scripts.Render("~/Scripts/app/quiz-controller.js")
}

Answer 1

你基本上找到了在控制器中使用this不是一个好主意的原因。 $ http的成功承诺中的this不是控制器的this，因为此函数在不同的上下文中执行。如果通过闭包获得$scope，这不会成为问题。

您可以通过定义变量var that = this;然后再使用that来解决此问题。

Answer 2

或者你可以使用javascripts bind函数并传递你想要使用的正确文本。

$http.get('/api/trivia').success(function (data, status, headers, config) {
    this.options = data.options;
    this.title = data.title;
    this.answered = false;
    this.working = false;
}.bind(this));

Answer 3

这对我有用，谢谢你/

// form.blade.php

<md-content flex ng-controller="EmployeeController as child" ng-cloak>
 <md-input-container>
    <label>State</label>
    <md-select name="fk_state" ng-model="form.fk_state">
        <md-option><em>Select</em></md-option>
        <md-option ng-repeat="state in child.states" ng-value="state.uf">
            [[state.uf]]
        </md-option>
    </md-select>
 </md-input-container>
</md-content>

// employeeController.js

angular.module("app").controller('EmployeeController',
 function($scope, $q, utilsFactory){

    var that = this;

    //service that contains a $http request
    utilsFactory.getAll('states').then(function(response) {
        that.states = response.data;
        console.log(that.states); //should be available to child.states
    });
 }
)

将$ scope替换为＆＃34;＆＃39; controller＆＃39;作为＆＃34;句法

3 个答案: