Question

我正在努力研究如何让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可以确定结果（true或false），但看起来该视图并未反映出这些变化。

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

Answer 1

尝试为范围变量赋值，而不是让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返回值，因此除了利用状态持久性来管理更新之外，没有什么可做的了（如图所示）我上面的回答）。

希望这会有所帮助。：）

ngShow超时无法按预期工作

1 个答案: