将 $scope 替换为“'controller' as"句法 [英] Replace $scope with "'controller' as" syntax

查看：26
本文介绍了将 $scope 替换为“'controller' as"句法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在关注这个 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，但我试图用新的语法控制器"替换它' 作为.(在检查 AngularJscontroller as"语法 - 澄清之后?)

我所做的现在不起作用，因为页面在 nextQuestion() 函数中调用了 $http.get，但视图保持不变，只有标题正在加载问题..."

我的代码:

JS http://pastebin.com/RfngRuZD

var app = angular.module('QuizApp', [])app.controller('QuizCtrl', ['$http', function ($http) {this.answered = false;this.title = "加载问题...";this.options = [];this.correctAnswer = false;this.working = false;this.answer = 函数 () {返回 this.correctAnswer ?'正确' : '不正确';};//得到this.nextQuestion = 函数 () {this.working = true;this.answered = false;this.title = "加载问题...";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 = "糟糕……出了点问题.";this.working = false;});};//邮政this.sendAnswer = 函数(选项){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 = "糟糕……出了点问题.";this.working = false;});};}]);

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

@{ViewBag.Title = "播放";}<div id="bodyContainer" ng-app="QuizApp"><section id="内容"><div class="容器"><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, 正确: quiz.correctAnswer, 不正确: !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">下一个问题</button></p>

<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 选项"ng-repeat="quiz.options 中的选项" ng-click="quiz.sendAnswer(option)" ng-disabled="quiz.working">{{option.title}}

</节>

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

解决方案

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

您可以通过定义一个变量 var that = this; 然后改用 that 来解决这个问题.

I'm following this AngularJS+ASP.NET tutorial(http://www.asp.net/web-api/tutorials/hands-on-labs/build-a-single-page-application-(spa)-with-aspnet-web-api-and-angularjs) and they make use of the $scope, but I'm trying to replace it with the new syntax 'controller' as. (after checking AngularJs "controller as" syntax - clarification?)

What I did it's not working at the moment, because the page calls the $http.get inside the nextQuestion() function, but the view remains the same with just the title "loading question..."

My Code:

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")
}

解决方案

You basically found the reason why using this isn't a very good idea in controllers. The this in your $http's success promise is not the this of the controller because this function gets executed in a different context. This wouldn't be an issue if you get $scope via the closure.

You can workaround that by defining a variable var that = this; and then use that instead.

这篇关于将 $scope 替换为“'controller' as"句法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆