ngShow的超时不能按预期工作

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在返回自己的值之前返回一个值，除了利用状态的持久性来管理更新（如上面的答案所示）之外，没有什么可做的了。

希望有帮助。 :)