javascript - ngShow超时未按预期工作

我正在努力使ngShow在指定的超时时间内确定表达式，事实证明Angular可以评估表达式但无法反映视图中的更改，这是我使用的代码

（视图）

<button
    type="button"
    class="btn btn-primary rule-fade"
    tooltip="{{ proLang.tooltip.ruleApplyBtnTxt }}"
    ng-click="applyRule('basic')"
    ng-show="showApplyBtns(selectedRules, selectedObj)"
>

    <span class="glyphicon glyphicon-dashboard"></span>
    Apply Rules
</button>

（控制器）
以及执行showApplyBtn函数的控制器

//determine whether apply buttons should be shown
$scope.showApplyBtns = function(selectedRules, selectedObj) {
    $timeout(function() {
        return selectedRules.length == 1 && selectedObj.length == 1;
    },500);
};

Angular可以确定结果（对或错），但该视图似乎无法反映所做的更改。

任何帮助，将不胜感激，谢谢！

最佳答案

而不是让showApplyBtns返回值，请尝试将值分配给作用域变量。

然后，您的button可以将该值绑定到ng-show

<button
    type="button"
    class="btn btn-primary rule-fade"
    tooltip="{{ proLang.tooltip.ruleApplyBtnTxt }}"
    ng-click="applyRule('basic')"
    ng-show="showApplyBtns"
>

然后更改您的控制器，以便applyRule()调用updateShowAppyBtns，这将更新绑定变量showApplyBtns

$scope.applyRule(...) {
    ...
    $scope.updateShowApplyBtns();
}

//determine whether apply buttons should be shown
$scope.updateShowApplyBtns = function() {
    $timeout(function() {
        $scope.showApplyBtns = $scope.selectedRules.length == 1 && $scope.selectedObj.length == 1;
    },500);
};

现在，当调用updateShowApplyBtns时，$timeout函数将更新$scope.showApplyBtns，并且由于该更新值现在已绑定到按钮上的ng-show，因此按钮的可见性将得到更新。

说明

您遇到的问题是您的showApplyBtns实际上没有返回值

$scope.showApplyBtns = function(selectedRules, selectedObj){
    $timeout(function(){
        return selectedRules.length == 1 && selectedObj.length == 1;
    },500);
    // return undefined (this is what actually happens here)
};

传递给$timeout的匿名函数返回一个值...但是该值被吞入$timeout函数内部，并且showApplyBtns保留不返回任何内容，因此它返回默认值undefined。

可以想象，showApplyBtns在返回自己的值之前先等待$timeout完成是不适当的，因为这会阻塞I / O（它会在等待时停止所有执行，这在设计上很困难用javascript做）。

由于showApplyBtns在返回自己的值之前不能等待$timeout返回值，因此除了利用状态的持久性来管理更新（如上面的答案所示）外，别无他法。

希望有帮助。 :)