timeout for ngShow not working as expected

user2499325

I am struggling on how to make the ngShow to determine the expression in a specified timeout period, it turns out that Angular can evaluate the expression but unable to reflect the changes in the view, here is the code I used

(View)

<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>

(Controller) And the controller implementing the showApplyBtn function

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

Angular can determine the result (true or false), but it seems that the view doesn't reflect the changes.

Any help would be appreciated, thanks!

sfletche

Rather than have showApplyBtns return a value, try assigning a value to a scope'ed variable.

Then your button can bind that value to ng-show

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

Then change your controller so that applyRule() calls updateShowAppyBtns which will update the bound variable 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);
};

Now when updateShowApplyBtns is called the $timeout function will update $scope.showApplyBtns and since that updated value is now bound to the ng-show on your button, your button's visibility will be updated.

EXPLANATION

The problem you were having is your showApplyBtns didn't actually return a value

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

The anonymous function passed to $timeout returns a value...but this value is swallowed inside the $timeout function and showApplyBtns is left without anything to return, and so it returns the default value of undefined.

As you can imagine, it would not be appropriate for showApplyBtns to wait for $timeout to finish before returning its own value as that would block i/o (it would halt all executions while waiting, which is, by design, hard to do in javascript).

Since showApplyBtns can't wait for $timeout to return a value before returning its own value, there is little left to do other than utilize the persistence of state to manage the update (as illustrated in my answer above).

Hopefully that helps. :)

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

AJAX call is not working as expected

分類Dev

jQuery .when().then() not working as expected

分類Dev

.vimrc file not working as expected

分類Dev

*ngIf not working as expected with observable

分類Dev

ItemIsAutoTristate flag not working as expected

分類Dev

KeyboardAvoidingView not working as expected on IOS

分類Dev

PowerShell variables not working as expected

分類Dev

XPath logical 'and' not working as expected?

分類Dev

CancellationTokenSource not working as expected on a TaskCompletionSource

分類Dev

string formatting not working as expected

分類Dev

Why is .on() Not working as expected in jquery?

分類Dev

Tuples in Scala not working as expected

分類Dev

strpos() not working as expected

分類Dev

PHP Dateformat not working as expected

分類Dev

Update not working as expected

分類Dev

ifelse not working as expected in R

分類Dev

$("#form").submit(); is not working as expected

分類Dev

Prototype is not working as expected

分類Dev

LIKE and Equals not working as expected

分類Dev

Regex is not working as expected in javascript

分類Dev

angularjs service not working as expected

分類Dev

NSTask not working as expected / hoped for

分類Dev

Routing not working as expected in CodeIgniter

分類Dev

mhddfs not working as expected

分類Dev

Python: If...and... not working as expected

分類Dev

extglob negation not working as expected

分類Dev

LIKE query not working as expected

分類Dev

boostrap clearfix not working as expected

分類Dev

AltBeacon: ranging not working as expected