Variable Scopes in Angular

Question

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?

Just ng-hide="groupCreated" should be used

vp_arth
– vp_arth

2015-11-14 19:19:55 +00:00
Commented Nov 14, 2015 at 19:19 — vp_arth
– vp_arth, Commented Nov 14, 2015 at 19:19
@vp_arth good catch.

dfsq
– dfsq

2015-11-14 19:22:11 +00:00
Commented Nov 14, 2015 at 19:22 — dfsq
– dfsq, Commented Nov 14, 2015 at 19:22
Awesome, thanks for that.

Andrew
– Andrew

2015-11-14 20:37:14 +00:00
Commented Nov 14, 2015 at 20:37 — Andrew
– Andrew, Commented Nov 14, 2015 at 20:37

dfsq · Accepted Answer · 2015-11-14 19:21:59Z

5

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"

edited Nov 14, 2015 at 19:21

answered Nov 14, 2015 at 19:05

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Variable Scopes in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related