CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
p1100i
p1100i

Reputation: 3750

Does 'this' always point on the current scope in a template?

Is it always safe to use this inside a template to get a reference on the current scope?

<span ng-click="log(this)">
    Is my onclick parameter always the current controllers scope?
</span>

Here is a fiddle to show what I mean.

Searched around as well, but couldn't find any point on this in the docs. It seems to work, however I don't want to depend on an undocumented feature. If you can, please link the proper doc for this.

Upvotes: 4

Views: 331

Answers (2)

PSL
PSL

Reputation: 123739

The expression log(this) is evaluated against the scope, and scope object has a this property in it as well which points to its own reference. So it will evaluate this against the scope will yield the scope itself. For example you could also pass $parent and you will see it will point to the parent scope since the argument in the expression gets evaluated against the current scope will yield scope['$parent'] similarly it happens to scope['this'] too. Using ng-click="method(this)" in angular context completely different from doing onclick="somefunc(this)" on a DOM element. Angular is able to expand it only because it has a property with the name this attached to the scope object.

Another thing is you do not need to pass this even otherwise the method is run by evaluating against the scope object, so referring to this will yield the scope itself. i.e you could as well do ng-click="log()" and in the log method you can refer to this as the current scope where the element is bound to. For instance if you were using controllerAs syntax and you are calling:

<div ng-controller="MyOtherCtrl as vm">
    <span ng-click="vm.log(this)">Click on me, if background gets teal, then this points on the child controllers scope</span>
</div>

Now this will not be the controller instance (which is what you would generally expect it to be), instead it will just be the scope object itself as it evaluates the expression as scope.vm.log(scope.this)

It would always be safer to use $scope in the context of the controller, unless you specifically want to refer to some child scope created on the view due to some directive(by some ng-repeat, ng-if etc..) wrapping that particular context. Also remember properties get prototypically inherited (except for isolated scoped directive) in the child scopes.

And there are no links documented or anything as far as i know, but source code itself is the official record. Angular uses $parse to expand the expressions and if you see the source code you can see that angular invokes the expressions with function.apply with the context.

Upvotes: 4

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85633

this refers to the $scope of the controller directive.

For eg:

<div ng-controller="myCntrl">
   <span ng-click="log(this)">
      Is my onclick parameter always the current controllers scope?
   </span>
</div>

So, this is referring to the myCntrl's $scope.

Upvotes: 2

Related Questions