I've encountered a strange issue with ng-switch that I can't seem to solve. On the top of my page, I have:
#content{"ng-switch" => "root.showAlert"}
%div.alert.ng-cloak#alert{"ng-switch-when" => "true"}
{{root.alert.message}}
%div.close
%a{:href => "#", "ng-click" => "dismissAlert()"}
=image_tag "icons/icon-close-black.png"
In one of my controllers (highest level), I have this action:
$scope.displayAlert = function(message) {
$scope.root.alert = {
message: message
};
$scope.root.showAlert = true;
if (!$scope.$$phase) {
$rootScope.$digest();
}
}
The $scope.root is defined in the $rootScope so it's accessible everywhere.
When I set the root.showAlert flag to true, I expect the alert to appear because it's watching that variable. However, it doesn't show up immediately; instead, it appears only when I perform another action in the app.
Adding $rootScope.$digest() makes it work and display immediately, but I'm curious why it doesn't do it automatically?
For dismissing the alert:
$rootScope.dismissAlert = function() {
$scope.root.showAlert = false;
delete $scope.root.alert;
}