国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
AngularJS進(jìn)階(九)控制器controller之間如何通信

AngularJS控制器controller之間如何通信

angular控制器通信的方式有三種:

 1,利用作用域繼承的方式。即子控制器繼承父控制器中的內(nèi)容

 2,基于事件的方式。即$on,$emit,$boardcast這三種方式

 3,服務(wù)方式。寫一個服務(wù)的單例然后通過注入來使用

利用作用域的繼承方式

由于作用域的繼承是基于js的原型繼承方式,所以這里分為兩種情況,當(dāng)作用域上面的值為基本類型的時候,修改父作用域上面的值會影響到子作用域,反之,修改子作用域只會影響子作用域的值,不會影響父作用域上面的值;如果需要父作用域與子作用域共享一個值的話,就需要用到后面一種,即作用域上的值為對象,任何一方的修改都能影響另一方,這是因為在js中對象都是引用類型。

基本類型

function Sandcrawler($scope) {

$scope.location = "Mos Eisley North";

$scope.move = function(newLocation) {

    $scope.location = newLocation;

}

};

function Droid($scope) {

$scope.sell = function(newLocation) {

$scope.location = newLocation;

}

}

// html

<div ng-controller="Sandcrawler">

<p>Location: </p>

<button ng-click="move('Mos Eisley South')">Move</button>

<div ng-controller="Droid">

    <p>Location: </p>

    <button ng-click="sell('Owen Farm')">Sell</button>

</div>

基于事件的方式

在一般情況下基于繼承的方式已經(jīng)足夠滿足大部分情況了,但是這種方式?jīng)]有實現(xiàn)兄弟控制器之間的通信方式,所以引出了事件的方式?;谑录姆绞街形覀兛梢岳?on,$emit,$boardcast這幾個方式來實現(xiàn),其中$on表示事件監(jiān)聽,$emit表示向父級以上的作用域觸發(fā)事件, $boardcast表示向子級以下的作用域廣播事件。

angular服務(wù)的方式

在ng中服務(wù)是一個單例,所以在服務(wù)中生成一個對象,該對象就可以利用依賴注入的方式在所有的控制器中共享。

var app = angular.module('myApp', []);

//使用factory API創(chuàng)建服務(wù)instance

app.factory('instance', function(){

return {};

});

app.controller('MainCtrl', function($scope, instance) {

$scope.change = function() {

instance.name = $scope.test;

};

});

app.controller('sideCtrl', function($scope, instance) {

$scope.add = function() {

$scope.name = instance.name;

};

});

//html

<div ng-controller="MainCtrl">

<input type="text" ng-model="test" />

<div ng-click="change()">click me</div>

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
AngularJS開發(fā)指南17:Controller組件
AngularJS自學(xué)之路(三)
ionic中獲取ng
學(xué)習(xí)AngularJs:Directive指令用法(完整版)
AngularJS快速入門指南18:Application   是時候創(chuàng)建一個真正的AngularJS單頁面應(yīng)用程序了(SPA)。 一個AngularJS應(yīng)用程序示例   你已經(jīng)了解了足夠多的內(nèi)容
AngularJS1:directive和controller如何通信
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服