与＆QUOT替换$范围;“控制器”AS＆QUOT;句法 [英] Replace $scope with "'controller' as" syntax
问题描述
我跟随这AngularJS + ASP.NET教程（<一个href=\"http://www.asp.net/web-api/tutorials/hands-on-labs/build-a-single-page-application-(spa)-with-aspnet-web-api-and-angularjs\" rel=\"nofollow\">http://www.asp.net/web-api/tutorials/hands-on-labs/build-a-single-page-application-(spa)-with-aspnet-web-api-and-angularjs)他们利用$范围，但我试图用新的语法控制器来代替它。（检查后，<一个href=\"http://stackoverflow.com/questions/21287794/angularjs-controller-as-syntax-clarification\">AngularJs ＆QUOT;控制器＆QUOT;语法 - 澄清）
我所做的这不是做什么工作的，因为页面调用$ http.get的nextQuestion（）函数中，但认为保持不变，只有标题装载问题...
我的code：
JS http://pastebin.com/RfngRuZD
VAR应用= angular.module（'QuizApp'，[]）app.controller（'QuizCtrl'，['$ HTTP'，函数（$ 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 /琐事'）。成功（功能（数据，状态，头，配置）{
this.options = data.options;
this.title = data.title;
this.answered = FALSE;
this.working = FALSE;
}）错误（功能（数据，状态，头，配置）{
this.title =哎呀......出事了。
this.working = FALSE;
}）;
}; // POST
this.sendAnswer =功能（选件）{
this.working = TRUE;
this.answered = TRUE; $ http.post（'/ API /琐事'，{'questionId'：option.questionId，'optionId'：option.id}）。成功（功能（数据，状态，头，配置）{
this.correctAnswer =（数据===真）;
this.working = FALSE;
}）错误（功能（数据，状态，头，配置）{
this.title =哎呀......出事了。
this.working = FALSE;
}）;
};
}]）;
Index.cshtml http://pastebin.com/YmV1hwcU
@ {
ViewBag.Title =播放;
}＆LT; DIV ID =bodyContainerNG-应用=QuizApp＆GT;
＆lt;节ID =内容＆GT;
＆LT; DIV CLASS =容器＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =翻转容器文本中心COL-MD-12NG控制器=QuizCtrl为竞猜NG-的init =quiz.nextQuestion（）＆GT;
＆LT; DIV CLASS =后面的NG-CLASS ={翻转：quiz.answered，正确的：quiz.correctAnswer，不正确的：quiz.correctAnswer}＆GT; ＆LT; p =班领导＆GT; {{quiz.answer（）}}＆LT; / P＆GT;
＆所述p为H.;
＆LT;按钮类=BTN BTN-信息BTN-LG下一个选项NG点击=quiz.nextQuestion（）NG-禁用=quiz.working＆gt;接下来问题＆LT; /按钮＆GT;
＆所述; / P＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =前NG-CLASS ={翻转：quiz.answered}＆GT;
＆LT; p =班领导＆GT; {{quiz.title}}＆LT; / P＆GT;
＆LT; DIV CLASS =行内文本中心＆GT;
＆LT;按钮类=BTN BTN-信息BTN-LG选项
NG-重复=，在quiz.options选项NG点击=quiz.sendAnswer（选项）NG残疾=quiz.working＆GT;
{{option.title}}
＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /节＆gt;
＆LT; / DIV＆GT;@section脚本{
@ Scripts.Render（〜/脚本/ angular.js）
@ Scripts.Render（〜/脚本/应用/竞猜controller.js）
}
您发现基本上使用的原因这个是不是一个很好的主意控制器的原因。
在这个在$ HTTP的成功承诺是不是，因为这个函数在不同的上下文中执行此控制器。如果你这不会是一个问题 $范围通过关闭。
您可以变通方法，通过定义=该变量 VAR; ，然后用是而不是
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.
这篇关于与＆QUOT替换$范围;“控制器”AS＆QUOT;句法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
