Angular This vs $scope

This vs $scope

------------------------------------------------------------------------------

' This ' vs $scope in AngularJS controllers

How does this and $scope work in AngularJS controllers?

Short Answer:

• This
  • when the controller constructor function is called,  this is the controller. (This is the controller function when the controller constructor is called )
  • when a function defined on a , $scope  object is called,  this  is the " Scope in effect when the function is called ". This could (or may not!) (This can or may not be $scope) be the  $scope  that The function was defined on. So, inside the function,  this  and  $scope  may  not  be the same.
• $scope
  • The Every controller has a $scope  associated object (each controller has a $scope associated withit).
  • A Controller (constructor) function is responsible for setting model properties and Functions/behaviour on its associated $scope.
  • Only methods defined on $scope the This object (and parent scope objects, if prototypical inheritance was in play) are ACCESSIBL E from the Html/view. e.g., from ng-click , filters, etc.

Long Answer:

A controller function is a JavaScript constructor function. (The controller function is an ordinary constructor function)

When the constructor function executes (e.g., when a view loads), this (i.e., the "function context") are set to the CONTR Oller object. The "tabs" Controller constructor function, when the AddPane function is created

this.addPane = function(pane) { ... }

It is created on the Controller object and not on $scope. Views cannot see the AddPane function – they only has access to functions defined on $scope. In other words, in the HTML, this won ' t work:

<a ng-click="addPane(newPane)">won‘t work</a>

After the ' tabs ' controller constructor function executes, we have the following:

The dashed black line indicates prototypal inheritance-a isolate scope prototypically inherits from scope. (It does not prototypically inherit from the scope in effect where the directive is encountered in the HTML.)

Now, the pane directive's link function wants to communicate and the tabs directive (which really means it needs to AFFEC t the tabs isolate $scope in some). Events could was used, but another mechanism was to has the pane directive the tabs require controller. (There appears to is no mechanism for the pane directive to the require tabs $scope.)

So, this begs the question:if we only has access to the tabs controller, how does we get access to the tabs isolate $scope (Which is the what we really want)?

Well, the red dotted line is the answer. The AddPane () function ' s "Scope" (I ' m referring to JavaScript ' s function scope/closures here) gives the function access to The tabs isolate $scope. i.e., AddPane () have access to the ' tabs Isolatescope ' in the diagram above because of a closure that is created when ADDP ANE () was defined. (If we instead defined AddPane () on the Tabs $scope object, the pane directive would is not having access to this function, and Hence it would have no-to-communicate with the tabs $scope.)

To answer the other part of your question: how does $scope work in controllers? :

Within functions defined on $scope, are this set to "the $scope in effect where/when the function was called". Suppose we have the following HTML:

<div Ng-controller="Parentctrl"> <a ng-click< Span class= "pun" >= "Logthisandscope ()" >log "This" and $ Scope</a>-parent scope <div Span class= "ATN" >ng-controller= "Childctrl" >  <a ng-click= "Logthisandscope ()" >log "This" and $scope  </a>-child scope </div></ Div>               

and the ParentCtrl (solely) has

$scope.logThisAndScope = function() { console.log(this, $scope)}

Clicking the first link would show this $scope that and is the same, since "the scope in effect when thefunction is Called"is the scope associated with the ParentCtrl .

Clicking the second Link would reveal this $scope and is not the same, since ' the scope in effect when theFu Nction was called"are the scope associated with the ChildCtrl . So here, are this set to ChildCtrl ' s $scope . Inside the method, is $scope still the ParentCtrl ' s $scope ( when the sub controller is clicked, this points to the child controller (this points to the problem), $scope still points to the parent controller ).

I try to not use this inside of a function defined on $scope, as it becomes confusing which $scope is being affected, ES Pecially Considering that ng-repeat, Ng-include, Ng-switch, and directives can all create their own child scopes.

--------------------------------------------------------------------------

Angular This vs $scope

Recently encountered in the angular project about the use of $scope&this exposure data in the controller, the following analysis:

"Controller as" is a new syntax for angular after 1.2, and I'll compare the two in terms of citation, scope, object vs. three:

One, quoting method:

1) $scope only need to be declared in the injection, after which you can directly attach the data object:

Controller

function Actrl ($scope) {

$scope. Test = "an example"; Add test to the $scope object

}

Html:

<div ng-controller= "Actrl" >

{{Test}}

</div>

2) This uses the controller as (requires version ng 1.2+) notation:

Controller

function bCTRL () {

var vm = this;

This.test = "an example"; Add test to the This object

}

Html:

<!--VM is a shorthand for the current controller, and can also write bCTRL as B,

The following variables can be drawn in B as b.test--

<div ng-controller= "bCTRL as VM" >

{{Vm.test}}

</div>

Ii. Scope of Action:

1) Variables or data objects in the $scope we can get them all, and the variables in the upper controller can be obtained in the subordinate controller:

Controller

function Parentctrl ($scope) {

$scope. Test = "Test";

$scope. Cover = "Coverage test";

}

function Childctrl ($scope) {

$scope. Cover = "Sub-coverage test";

var test = $scope. Test; Test

}

Html:

<div ng-controller= "Parentctrl" >

<p>parent-test: {{test}}</p>

<p>parent-cover: {{cover}}</p>

<div ng-controller= "Childctrl" >

<p>child-test: {{test}}</p>

<p>child-cover: {{cover}}</p>

</div>

</div>

The test variable I declared in the parent controller Parentctrl is not declared in the Childctrl of the child controller, and in child-test within the Childctrl scope, test outputs "testing"; Based on this I did another overlay test, the test results show that When the parent-child controller has the same variable, the parent-child controller will not overwrite the values in its range;

2) The variable in this applies only to the current controller:

Controller

function Parentctrl ($scope) {

var vm = this;

Vm.test = "Test";

Vm.cover = "coverage test";

}

function Childctrl ($scope) {

var vm = this;

Vm.cover = "Sub-coverage test";

}

Html:

<div ng-controller= "Parentctrl as parent" >

<p>parent-test: {{parent.test}}</p>

<p>parent-cover: {{parent.cover}}</p>

<div ng-controller= "Childctrl as Child" >

<p>child-test: {{child.test}}</p>

<p>child-cover: {{child.cover}}</p>

</div>

<div ng-controller= "Childctrl as parent" >

<p>child-test: {{parent.test}}</p>

<p>child-cover: {{parent.cover}}</p>

</div>

</div>

When using this, the namespace of each level variable is parallel, and the template HTML can only get the variables declared under the current controller.

Third, the object comparison:

Controller

function Cctrl ($scope) {

var vm = this;

$scope. Logthisandscope = function () {

Console.log (vm = = = $scope)

}

}

VMS and $scope are actually not equal, and in the console we can see

Vm:constructor;

$scope: $get. Scope. $new. child;

In $scope, a variable is included Vm:constructor

So, the actual relationship between $scope and this, the actual structure is

$scope: {

...,

Vm:constructor,

...

}

Then we can sort it out as follows:

$scope when the controller forms a parent-child relationship, the parent of a variable or method that does not have a child is automatically imposed on the child, and the child can arbitrarily get the variable or method of the current parent, which is irreversible, that is, the parent cannot get any variables or methods from the $scope to the child.

This is like an individual, all things are managed by themselves, there is no parent-child variable confusion relationship.

What about the data sharing? Data business logic I think it's better to give it to a more professional service.

In fact, there is no merit or disadvantage in the performance of the two methods, only the choice of code habits.

This may depend on the angle of our observation, but it can be understood as the difference between private and public!

Angular This vs $scope