Angular 作用域與事件

2021-07-31 02:40:31 字數 1546 閱讀 9269

從作用域往上傳送事件,使用scope.$emit

$scope.$emit("someevent", {});

從作用域往下傳送事件,使用scope.$broadcast

$scope.$broadcast("someevent", {});

這兩個方法的第二個引數是要隨事件帶出的資料。

注意,這兩種方式傳播事件,事件的傳送方自己也會收到乙份。

使用事件的主要作用是消除模組間的耦合,傳送方是不需要知道接收方的狀況的,接收方也不需要知道傳送方的狀況,雙方只需要傳送必要的業務資料即可$emit只能向parent controller

傳遞event與data

$broadcast只能向child controller傳遞event與data

$on用於接收event與data下

html**

ng-controller="parentctrl">

ng-controller="selfctrl">

ng-click="click()">click mea>

ng-controller="childctrl">

div>

div>

ng-controller="broctrl">

div>

div>

js**

($scope)

});($scope) );

$scope.$on('to-child', function

(event,data) );

});($scope));

$scope.$on('to-parent', function

(event,data) );

});($scope));

$scope.$on('to-child', function

(event,data) );

});

最終結果

自己測試

$emit和$broadcast可以傳多個引數,$on也可以接收多個引數。

在$on的方法中的event事件引數,其物件的屬性和方法如下

事件屬性 目的

event.targetscope 發出或者傳播原始事件的作用域

event.currentscope 目前正在處理的事件的作用域

event.name 事件名稱

event.stoppropagation() 乙個防止事件進一步傳播(冒泡/捕獲)的函式(這只適用於使用`$emit`發出的事件)

event.preventdefault() 這個方法實際上不會做什麼事,但是會設定`defaultprevented`為true。直到事件***的實現者採取行動之前它才會檢查`defaultprevented`的值。

event.defaultprevented 如果呼叫了`preventdefault`則為true

深入作用域之靜態作用域與動態作用域

概念 靜態作用域指的是一段 在它執行之前就已經確定了它的作用域,簡單來說就是在執行之前就確定了它可以應用哪些地方的作用域 變數 動態作用域在 執行的時候才確定它的作用域的,以及作用域鏈。靜態作用域 var a 10 function fn fn 11 在建立函式fn的時候就已經確定了它可以作用那些變...

angular中作用域的生命週期

先扯淡是慣例 生命對於人而言是再重要不過的東西了,但你不太可能每天去考慮自己離生命結束還有多久,生命週期就更談不上了,人的生命一旦結束就不會再次開始,如果你堅持認為生命有輪迴,好吧,咱倆的淡扯不到一塊去。但對於angular的作用域來講,它確實是有生命週期的,也就是說它可以死而復生,而且一定是在你需...

塊級作用域與函式作用域

函式作用域 變數在定義的環境中以及巢狀的子函式中處處可見 塊級作用域 變數在離開定義的塊級 後立即被 在es6之前,js的作用域只有兩種 函式作用域和全域性作用域。使用var宣告的變數,都存在變數提公升的過程。console.log a undefined console.log c undefin...