CODEWITHSUNDEEP
htmlangularjs
Andrew
Andrew

Reputation: 83

Variable Scopes in Angular

I am building a simple web page signup form in Angular storing the data in Parse.

controller('AppCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {

    $rootScope.groupCreated = false;

    $scope.signUp = function(form) {

        var Group = Parse.Object.extend("AdminOrg");
        var group = new Group();
        group.set("groupName", form.name);
        group.set("groupPassword", form.password);

            group.save(null, {
                  success: function(data) {
                      $rootScope.groupCreated = true;

                  },
                  error: function(data, error) {
                    alert(error.message);
                  }
                });
      };
}]);

I am using $rootScope.groupCreated in my HTML to hide the signup form and show a "Group successfully created" message once the success function is called. The value is successfully being changed to true but it's not changing the html view. I am using the following to hide and show two divs:

ng-hide="$rootScope.groupCreated"
ng-show="$rootScope.groupCreated"

Am I accessing the $rootScope incorrectly in my HTML?

Upvotes: 4

Views: 50

Answers (1)

dfsq
dfsq

Reputation: 193251

Well Angular just doesn't know that you've changed something on the scope, because Parse functions are not part of Angular ecosystem, so not included into digest check loops. Just let Angular know manually with $apply method:

group.save(null, {
    success: function (data) {
        $rootScope.groupCreated = true;
        $rootScope.$apply();
    },
    error: function (data, error) {
        alert(error.message);
    }
});

And another problem, thanks to vp_arth for noticing in comments: you don't use $rootScope prefix in Agnular expressions:

ng-show="groupCreated"

Upvotes: 5

Related Questions