controller間通信
在填web坑的時候遇到這樣的需求
主要是通過$broadcast實現
檢索到的一個例子如下,很容易改造成需要的樣子
html
<div ng-controller="ControllerZero">
<input ng-model="message" >
<button ng-click="handleClick(message);">LOG</button>
</div>
<div ng-controller="ControllerOne">
<input ng-model="message" >
</div>
<div ng-controller="ControllerTwo">
<input ng-model="message" >
</div>
js部分
var myModule = angular.module('myModule', []);
myModule.factory('mySharedService', function($rootScope) {
var sharedService = {};
sharedService.message = '';
sharedService.prepForBroadcast = function(msg) {
this.message = msg;
this.broadcastItem();
};
sharedService.broadcastItem = function() {
$rootScope.$broadcast('handleBroadcast');
};
return sharedService;
});
function ControllerZero($scope, sharedService) {
$scope.handleClick = function(msg) {
sharedService.prepForBroadcast(msg);
};
$scope.$on('handleBroadcast', function() {
$scope.message = sharedService.message;
});
}
function ControllerOne($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'ONE: ' + sharedService.message;
});
}
function ControllerTwo($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'TWO: ' + sharedService.message;
});
}
ControllerZero.$inject = ['$scope', 'mySharedService'];
ControllerOne.$inject = ['$scope', 'mySharedService'];
ControllerTwo.$inject = ['$scope', 'mySharedService'];
淺顯易懂,不做過多解釋了
如果msg直接傳遞了$scope下的對象,由于對象引用問題,會有“牽一發而動全身的效果”
比如編輯用戶信息這個面板的數據通過通信從標題欄所屬的controller傳遞過來,就會導致編輯面板的改動即時展現在了標題欄=。=
事實上想要從外部修改一個controller里的scope,可以通過angular.element().scope()來獲取。
angular2中從外部更新數據
angular2中采用了組件化的形式,scope的方法已經被取代
從外部更新數據可以采用以下形式
//our root app component
import {Component, NgZone} from 'angular2/core'
@Component({
selector: 'my-app',
template: `<div>
<h2>Hello {{name}}</h2>
</div>`
})
export class App {
constructor(zone: NgZone) {
this.name = 'Angular2'
window.app = this
window.zoneImpl = zone
}
}
然后外部使用
zoneImpl.run(() => window.app.name = "new name!")
零零碎碎
加載時的閃爍問題采用ng-cloak解決