How to do $scope.$apply() with the new `controller as` syntax?

Question

In AngularJS they have $scope.$apply() method to update the UI when there's a model change that is not done through normal AngularJS means.

In the more recent tutorials they recommend using the <controller> as <object> style of instantiating the objects and use this as the scope from their example

.controller('TodoListController', function() {
var todoList = this;

However todoList.$apply() does not appear to work. Am I forced to use $scope.$apply() for this?

score 7 · Accepted Answer · edited May 23 '17 at 12:34

Yes you have to use $scope.$apply(), but that's not a bad thing.

I had this same exact dilemma after reading that one should use controllerAs syntax. I even asked this question a few months later In an isolate scope directive is there any difference between defining variables on scope and defining variables on the controller?

The answer, after thinking about this for a while, is that controllerAs syntax doesn't mean an aversion to $scope, but a design pattern to prevent global state from being stored in $scope because that's when you start nesting scopes, which leads to a lot of problems.

$scope isn't an evil thing. It just lets you screw yourself over, but if you need to use it you shouldn't stop yourself from doing so.

score 2 · Answer 2 · answered Aug 18 '15 at 04:04

2

Think you mean the "controller as" syntax, would be good to update the question title. You can still inject $scope and use it for registering watches or whatever, typically you aren't calling $apply within a controller though, typically it's done in a directive in response to some event that changes the model and needs to trigger Angular to refresh.

answered Aug 18 '15 at 04:04

shaunhusain

19,630
4
38
51

I updated the title. So it sounds like I'm forced to inject `$scope` if I wanted to use `$apply` then? – Archimedes Trajano Aug 18 '15 at 11:43

score 2 · Answer 3 · answered Jun 13 '16 at 00:37

The solution to this is pass this as bind parameter using either ES5 bind or angular.bind function

Eexmaple:

myApp.controller("myController",['$scope',function(s){
   this.name="val1";
   console.log("1: "+this.name);
   setTimeout(function(){
     console.log("2: "+this.name);
 
     s.$apply(function(){
       this.name="val2";  
     }.bind(this));
     console.log("3: "+this.name);
   }.bind(this));
  }]);

score 0 · Answer 4 · answered Aug 18 '15 at 04:11

Directly in the controller this refers to the controller

.controller('TodoListController', function() {
    var todoList = this;

Here todoList is the controller.

However in a method defined on the scope, this refers to the scope. So

.controller('TodoListController', function($scope) {
    $scope.myFunction = function() {
        var todoList = this;
        ....

would have todoList pointing to the scope and you can do todoList.$apply()

How to do $scope.$apply() with the new `controller as` syntax?

4 Answers4