AngularJS scope will not change inside my controller

Question

I cannot get $scope.loading to update inside in my controllers createProject() function. The scope is changed but the value on page does not update, why? I have tried apply() but this just gives an error:

Error: [$rootScope:inprog] http://errors.angularjs.org/1.2.19/$rootScope/inprog?p0=%24digest
    at Error (native)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:6:450
    at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:105:353)
    at k.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:113:31)
    at http://127.0.0.1:8004/static/js/controllers/project.js:56:27
    at J (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:100:424)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:102:64
    at k.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:112:319)
    at k.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:109:392)
    at k.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:113:100)

HTML:

 <button ng-show="project.new" class="btn btn-primary" ng-click="actionCreateProject()"
                            spinner-button=loading>Create
                    </button>

Directive:

app.directive('spinnerButton', function () {
    return {
        restrict: "A",
        transclude: true,
        template: "<div ng-transclude ng-hide='loading'></div>"
            + "<div ng-show=loading>Not a button!</div>",
        scope: {loading: "=spinnerButton"},
        link: function (scope, elem) {
            elem.bind("click", function () {
                scope.loading = true;
            });
        }
    };
});

inside a controller:

  var createProject = function () {
                var new_project_data = {
                    "title": $scope.project.title,
                    "description": $scope.project.description
                };

                var resource = httpFactory.post("project", new_project_data)


                resource.then(function (object) {



                   $scope.$apply(function(){
                         $scope.loading = false;
                   })


                });


            };

You need to use scope.$apply... inside elem.bind("click", why do you have it inside createProject? docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply — PSL
– PSL, Commented Aug 11, 2014 at 16:02
with just $scope.loading = false; in my controller it will not update — Prometheus
– Prometheus, Commented Aug 11, 2014 at 16:08
If you call $apply() and it give you the error, then that $apply() is unnecessary and you should remove it. The problem is somewhere else. — runTarm
– runTarm, Commented Aug 11, 2014 at 16:18

Vasim · Accepted Answer · 2014-08-11 16:04:45Z

1

Call $apply in your and you don't need to call $apply in your controller.

  elem.bind("click", function () {
      scope.loading = true;
      scope.$apply();
  });

answered Aug 11, 2014 at 16:04

Vasim

1661 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

AngularJS scope will not change inside my controller

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