CODEWITHSUNDEEP
javascriptangularjs
sinθ
sinθ

Reputation: 11493

Directive not responding to changes in scope variable

I have the following directive:

  <span ng-show="{{ save_state == 'saved' }}"> Saved </span>
  <span ng-show="{{ save_state == 'saving' }}"> Saving </span>
  <span ng-show="{{ save_state == 'error' }}"> Error </span>

These callbacks are called at various time:

var saving = function() {
    $scope.save_state = "saving";
    $scope.$apply();
};
var saved = function() {
    $scope.save_state = "saved";
    $scope.$apply();
};
var error = function(err) {
    alert(err);
    $scope.save_state = "error";
    $scope.$apply();
};

and I also have this statement for debugging

<span> {{ save_state == 'saving' }} </span>

For some reason, even what the span tag above shows true, the "Saving" span tag does not show. Same for "error". Why?

Upvotes: 0

Views: 81

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67296

It is because you are interpolating {{ }} the contents of the ng-show Directive:

ng-show="{{ save_state == 'saved' }}"

ng-show requires that you provide a valid Angular Expression.:

ng-show="save_state == 'saved'"

Upvotes: 1

Related Questions