Angular this vs $scope $event事件系统

时间 2019-11-11

标签 angular scope event 事件系统栏目 AngularJS 繁體版

原文原文链接

this vs $scope

------------------------------------------------------------------------------ html

'this' vs $scope in AngularJS controllersangularjs

How does this and $scope work in AngularJS controllers?web

Short answer:

this
- When the controller constructor function is called, this is the controller.(当控制器构造函数被“调用”时，this就是控制器函数)
- When a function defined on a $scope object is called, this is the "scope in effect when the function was called". This may (or may not!)(this多是也可不能不是$scope) be the $scope that the function is defined on. So, inside the function, this and $scope may not be the same.
$scope
- Every controller has an associated $scope object(每一个控制器都有一个与其相关联的$scope).
- A controller (constructor) function is responsible for setting model properties and functions/behaviour on its associated $scope.
- Only methods defined on this $scope object (and parent scope objects, if prototypical inheritance is in play) are accessible from the HTML/view. E.g., from ng-click, filters, etc.

Long answer:

A controller function is a JavaScript constructor function.(控制器函数就是一个普普统统地构造器函数)app

When the constructor function executes (e.g., when a view loads), this (i.e., the "function context") is set to the controller object. So in the "tabs" controller constructor function, when the addPane function is createdless

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

it is created on the controller object, not on $scope. Views cannot see the addPane function -- they only have access to functions defined on $scope. In other words, in the HTML, this won't work:ide

<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 -- an isolate scope prototypically inherits from Scope. (It does not prototypically inherit from the scope in effect where the directive was encountered in the HTML.)性能

Now, the pane directive's link function wants to communicate with the tabs directive (which really means it needs to affect the tabs isolate $scope in some way). Events could be used, but another mechanism is to have the pane directive require the tabs controller. (There appears to be no mechanism for the pane directive to require the tabs $scope.)测试

So, this begs the question: if we only have access to the tabs controller, how do we get access to the tabs isolate $scope (which is what we really want)?ui

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() has access to the "tabs IsolateScope" in the diagram above because of a closure that was created when addPane() was defined. (If we instead defined addPane() on the tabs $scope object, the pane directive would not have access to this function, and hence it would have no way 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, this is 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="logThisAndScope()">log "this" and $scope</a> - parent scope <div 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 will show that this and $scope are the same, since "the scope in effect when the function was called" is the scope associated with the ParentCtrl.

Clicking the second link will reveal this and $scope are not the same, since "the scope in effect when the function was called" is the scope associated with the ChildCtrl. So here, this is set to ChildCtrl's $scope. Inside the method, $scope is still the ParentCtrl's $scope(点击子控制器时，this指向了子控制器(this的指向问题)，$scope仍旧指向了父控制器).

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

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

Angular this vs $scope

最近在Angular项目中遇到关于controller内使用$scope&this 暴露数据的问题，下面来分析一下：

“controller as” 是Angular在1.2版本后新增的语法，我将从引用方式，做用范围，对象对比三个方面作二者的比较：

1、引用方式：

1) $scope 只须要在注入中声明，后面就能够直接在附加数据对象：

controller:

function ACtrl($scope) {

$scope.test = "一个例子"; //在$scope对象中加入test

}

html:

</div>

2) this 则采用了controller as(须要版本为ng 1.2+)写法：

controller:

function BCtrl() {

var vm = this;

this.test = "一个例子"; //在this对象中加入test

}

html:

<!-- vm为本身为当前控制器做的一个简略记号，也能够写做 BCtrl as b,

后面变量即可以在b中引出如b.test -->

</div>

2、做用范围：

1) $scope 中的变量或数据对象咱们能够所有拿到，而且上级控制器中的变量也能够在下级控制器中被获取到：

controller:

function ParentCtrl($scope) {

$scope.test = "测试";

$scope.cover ="覆盖测试";

}

function ChildCtrl($scope) {

$scope.cover ="子覆盖测试";

var test = $scope.test; //“测试”

}

html:

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

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

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

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

</div>

我在父控制器ParentCtrl中声明的test变量并未在子控制器ChildCtrl中作声明，而在ChildCtrl做用范围内的Child-test 中，test却输出了”测试”；基于此我再作了一次覆盖测试，检测结果显示，当父子控制器同时存在相同的变量时，父子控制器各自范围内的值不会被覆盖；

2) this 中的变量则只适用于当前控制器：

controller:

function ParentCtrl($scope) {

var vm = this;

vm.test = "测试";

vm.cover ="覆盖测试";

}

function ChildCtrl($scope) {

var vm = this;

vm.cover ="子覆盖测试";

}

html:

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

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

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

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

</div>

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

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

</div>

在使用this的时候，各层级变量的命名空间是平行的状态，模板html中只能够拿到当前控制器下声明的变量。

3、对象对比：

controller:

function CCtrl($scope) {

var vm = this;

$scope.logThisAndScope = function() {

console.log(vm === $scope)

}

vm与$scope其实是不相等的，在console中咱们能够看到

vm: Constructor;

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

而在$scope中又包含了一个变量vm: Constructor

因此，$scope和this的实际关系，实际结构是

$scope: {

...,

vm: Constructor,

...

}

那么咱们能够整理以下：

$scope 当控制器在写法上造成父子级关系时，子级没有的变量或方法父级会自动强加在子级身上，子级能够任意获取到当前父级的变量或方法，该种形式是不可逆的，即父级没法经过$scope获取到子级的任意变量或方法。

this 则像一个独立的个体，全部东西都是由本身管理，也就不存在父子级变量混淆关系了。

那数据共享该如何进行呢？数据业务逻辑我以为仍是交给更专业的service来处理吧。

两种方式其实在性能上并没有优劣之分，只有代码习惯的选择。

这或许能够取决于咱们观察的角度，其实能够理解为私用跟公用的区别！

$event

$event服务就是对原生事件的封装，但在ng中，$event服务的意义更主要是在parent-child控制器中进行通讯。

In cases where the components of our web application are loosely connected, such as when we require user authentication and handle authorization, it’s not always feasible to handle the immediate communication without coupling our components together.
For example, if our back end responds to a request with a status code of 401 (indicative of an unauthorized request), we expect that our web app won’t allow our user to stay connected to the current view. In this case, we’d want our app to redirect the user to a login or signup page.
Given this logic, we cannot tell our controllers to set a new location from the outside. We also want this specific functionality to space across multiple scopes so we can protect multiple scopes using the same behavior. We need another way to communicate between them.
Angular’s scopes are hierarchical in nature: They can naturally communicate back and forth through parent-child relationships. Oftentimes, however, our scopes don’t share variables, and they often perform completely different functions from each other, regardless of their place in the parent tree.
For these cases, we have the ability to communicate between our scopes by propagating events up and down the chain(经过事件传播在不一样的做用域上进行通讯)。

What are Events

Just as the browser responds to browser-level events, such as a mouse click or a page scroll, our Angular app can respond to Angular events(angualr应用能够响应angualr事件). This fact gives us the advantage of being able to communicate across our application inside nested components(在不一样的组件之间) that are not built with other
Note that the Angular event system does not share the browser event system, meaning that, by design, we can only listen for Angular events, not DOM events on scopes.
We can think of events as snippets of information propagated across an application that generally (optionally) contain information about what’s happening inside of that application.

能够把事件当作一段信息，这段信息包含了“发生的事件”，这段信息在angualr应用之间进行传播。

Event Propagation(事件传播)

Since scopes are hierarchical, we can pass events up or down the scope chain.

A generally good rule of thumb for choosing the event passing method that we’ll use is to look at the scope from which we’re firing the event.

If we want to notify the entire event system (thus allowing any scope to handle the event), we’ll want to broadcast downwards.
On the other hand, if we want to alert a global module (so to speak), we’ll end up needing to alert our higher-level scopes ($rootScope, for instance), and we’ll need to pass an event upwards. It’s a good idea to limit the number of notifications sent to the global level, particularly because events, although very powerful, introduce complexity into our apps.
For example, when we’re routing, the ‘global’ app state needs to know at which page the app is currently set, while, on the other hand, if we’re communicating between a tab directive to its child pane directives, we’ll need to send the event downwards

Bubbling an Event Up with $emit(向上传播，child->parent)

To dispatch an event to travel up the scope chain (from child scopes to parent scopes), we’ll use the $emit() function.

Sending an Event Down with $broadcast(向下传播，parent->child )

To pass an event downwards (from parent scopes to child scopes), we use the $broadcast() function

On the $broadcast() method, every single child scope(采用broadcast方法，每一个子做用域都会收到) that registers a listener will receive this message. The event propagates to all directives and indirect scopes of the current scope and calls every single listener all the way down. We cannot cancel events sent using the $broadcast() method.

Listening(事件监听)

To listen for an event, we can use the $on() method. This method registers a listener for the event bearing a particular name. The event name is simply the event type fired in Angular