我刚开始使用angular.js
,而今天我正在编写控制器:
myApp.controller('RepetitionController', ['$scope', '$location', 'repetitionService',
function ($scope, $location, repetitionService) {
$scope.questions = repetitionService.getQuestions();
$scope.questionsLeft = $scope.questions.length;
$scope.questionsAnswered = 0;
$scope.percentageLeft = ($scope.questionsLeft == 0 ? 100 : 0);
$scope.repetitonState = ???
$scope.endRepetition = function () {
repetitionService.clearSelectedSets();
$location.path("/setsAndCollections");
}
$scope.submitAnswer = function () {
alert("alert");
}
}]);
我开始怀疑。
你可以看到我使用三元运算符来创建$scope
的初始状态,现在在我的repetitionState
字段中,我想要这样的(questionsLeft === 0 ? 'finished' : questions[0].type)
。
有没有什么方法可以定义一个在填充$scope
对象(某种后构造函数)之后调用的函数?
或许有一种方法可以“观察”功能,所以我可以写
$scope.repetitionState = function(){
///logic here
};
我只是担心会出现需要编写logicalExpression ? anonymousFunction () : someOtherAnonymousFunction()
的情况,对我来说,嵌套所有这些匿名函数(现在)有点难读,我想知道是否有是angular
的某些部分,可能在这种情况下有用。
答案 0 :(得分:4)
你当然可以观看一个功能。 $watch
为watchExpression参数接受字符串或函数。如果您正在使用函数,则将当前作用域作为第一个参数传递给该函数。
要记住的一件重要事情是watchExpression函数应该是幂等的,因此请确保只更新侦听器函数中的范围。
$scope.repititionState = getRepititionState($scope);
$scope.$watch(getRepititionState, function(newVal, oldVal, scope) {
scope.renditionState = newVal;
});
function getRepititionState(scope) {
var repititionState;
// your logic here, just remember to set and return repititionState
return repititionState;
}
答案 1 :(得分:1)
您想在哪里引用repititionState
为什么不将它作为函数引用?
例如:我们假设您将使用repititionState
为您提供如下课程
<div ng-class="repititionState"></div>
$scope.repititionState = ($scope.questionsLeft === 0 ? 'finished' : $scope.questions[0].type)
这样,只要你的问题完成,div就会得到一个finished
的类。为了使这个repititionState
依赖于另一个变量(就像你想要的那样),就像把它变成一个函数一样简单。
<div ng-class="repititionState()"></div>
注意额外的()
,它现在将repititionState
标记为函数。
$scope.repititionState = function(){
return ($scope.questionsLeft === 0 ? 'finished' : $scope.questions[0].type);
}
如果你在ng-repeat
之内,那么你甚至可以通过$index
来使这个功能更通用。
$scope.repititionState = function($index){
return ($scope.questionsLeft === 0 ? 'finished' : $scope.questions[$index].type);
}
这通常称为其他框架中的计算属性。在Angular中它只是一个功能。希望这会有所帮助。