Angularjs控制器 - 非平凡的初始状态

时间:2013-04-06 21:56:38

标签: javascript angularjs

我刚开始使用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的某些部分,可能在这种情况下有用。

2 个答案:

答案 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中它只是一个功能。希望这会有所帮助。