angularJs鐨凜ontroller涔嬮棿濡備綍閫氫俏
AngularJS涓殑controller鏄釜鍑芥暟锛岀敤鏉?a style="color: #136ec2;" target="_blank" href="http://zhannei.baidu.com/cse/search?s=12535204980459304754&entry=1&q=%E5%90%91%E8%A7%86%E5%9B%BE" class="bdcs-inlinelink">鍚戣鍥?/a>鐨?a style="color: #136ec2;" target="_blank" href="http://zhannei.baidu.com/cse/search?s=12535204980459304754&entry=1&q=%E4%BD%9C%E7%94%A8%E5%9F%9F" class="bdcs-inlinelink">浣滅敤鍩?/a>锛?scope锛夋坊鍔犻澶栫殑鍔熻兘锛屾垜浠敤瀹冩潵缁欎綔鐢ㄥ煙瀵硅薄璁剧疆鍒濆鐘舵€侊紝骞舵坊鍔犺嚜瀹氫箟琛屼负銆?/p>
褰撴垜浠湪鍒涘缓鏂扮殑鎺у埗鍣ㄦ椂锛?a style="color: #136ec2;" target="_blank" href="http://zhannei.baidu.com/cse/search?s=12535204980459304754&entry=1&q=angularJS" class="bdcs-inlinelink">angularJS浼氬府鎴戜滑鐢熸垚骞朵紶閫掍竴涓柊鐨?scope瀵硅薄缁欒繖涓猚ontroller,鍦╝ngularJS搴旂敤鐨勪腑鐨勪换浣曚竴涓儴鍒嗭紝閮芥湁鐖剁骇浣滅敤鍩熺殑瀛樺湪锛岄《绾у氨鏄痭g-app鎵€鍦ㄧ殑灞傜骇锛屽畠鐨勭埗绾т綔鐢ㄥ煙灏辨槸$rootScope銆?/p>
姣忎釜$scope鐨?root鎸囧悜$rootScope, $cope.$parent鎸囧悜鐖剁骇浣滅敤鍩熴€?/p>
cotroller涔嬮棿鐨勯€氫俊鏈川涓婃槸褰撳墠鐨刢ontroller鎵€鍦ㄧ殑$scope濡備綍璺熷叾浠朿ontroller涓婄殑$scope杩涜閫氫俊銆?/p>
閫氬父鏈?涓В鍐虫柟寮忥細
鍒╃敤浣滅敤鍩熺户鎵跨殑鍘熺悊锛屽瓙鎺у埗鍣ㄨ闂埗绾ф帶鍒跺櫒涓殑鍐呭銆?浣跨敤angularJS涓殑浜嬩欢锛屼篃灏辨槸浣跨敤$on,$emit,$broadcast杩涜娑堟伅浼犻€?浣跨敤angularJS涓殑鏈嶅姟
绗竴绉嶆柟寮?/p>
鍗充綔鐢ㄥ煙宓屽浣滅敤鍩燂紝鏈変竴瀹氱殑浣跨敤闄愬埗锛岄渶瑕佷綔鐢ㄥ煙宓屽璧锋潵锛屽湪瀹為檯寮€鍙戜腑杩欑鍦烘櫙鐩稿姣旇緝灏戯紝浣嗕篃涓嶆槸娌℃湁锛岃繖绉嶆柟寮忔洿绠€鍗曠洿鎺ャ€?/p>
angularJS涓粯璁ゆ儏鍐典笅锛屽綋鍓嶄綔鐢ㄥ煙涓棤娉曟壘鍒版煇涓睘鎬ф椂锛屽氨浼氬湪鐖剁骇浣滅敤鍩熶腑杩涜鏌ユ壘锛岃嫢鎵句笉鍒扮洿鑷虫煡鎵惧埌$rootScope銆?濡傛灉鍦?rootScope涓篃鏃犳硶鎵惧埌绋嬪簭渚濇棫杩愯锛屼絾瑙嗗浘涓嶄細鏇存柊銆?/p>
绀轰緥
javascript
//Javascript
app.controller('ParentController', function($scope) {聽
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() { $scope.person.name = 'Ari Lerner';
};
});
//HTML
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
//result
{"greeted":true, "name": "Ari Lerner"}
绗簩绉嶆柟寮?/p>
鍥犱负浣滅敤鍩熸槸鏈夊眰娆＄殑锛屾墍浠ュ彲浠ュ埄鐢ㄤ綔鐢ㄥ煙閾句紶閫掍簨浠躲€?/p>
浼犻€掍簨浠舵湁2绉嶆柟寮忥細 * $broadcast: 瑙﹀彂鐨勪簨浠惰閫氱煡鏁翠釜浜嬩欢绯荤粺锛堝厑璁镐换鎰忎綔鐢ㄥ煙澶勭悊杩欎釜浜嬩欢锛夊氨瑕佸悜涓嬩紶鎾€?* $emit: 濡傛灉瑕佹彁閱掍竴涓叏灞€妯″潡锛岄渶瑕侀€氱煡鏇撮珮灞傛鐨勪綔鐢ㄥ煙鏃讹紙渚嬪$rootscope锛夐渶瑕佹妸浜嬩欢鍚戜笂浼犻€掋€?/p>
浣滅敤鍩熶笂浣跨敤$on杩涜浜嬩欢鐩戝惉銆?/p>
绀轰緥
JavaScript
app.controller('ParentController', function($scope) {聽
$scope.$on('$fromSubControllerClick', function(e,data){console.log(data); // hello
});
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {$scope.$emit('$fromSubControllerClick','hello');
};
});
//HTML
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
</div>
鍦ㄨ繖閲屾兂瑕佽鐨勫彟澶栦竴涓棶棰樺氨鏄簨浠朵紶鎾殑鎬ц兘闂锛?broadcast+$on鐨勬柟寮忓洖閫氱煡鎵€鏈夌殑瀛愪綔鐢ㄥ煙锛岃繖閲屽氨浼氭湁鎬ц兘闂锛屾墍浠ユ帹鑽愪娇鐢?emit+$on鐨勬柟寮?涓轰簡杩涗竴姝ユ彁鍗囨€ц兘锛屽畾涔夌殑浜嬩欢澶勭悊鍑芥暟瑕佸湪浣滅敤鍩熼攢姣佹椂涓€璧烽噴鏀炬帀銆?/p>
浣跨敤$emit+$on鐨勬柟寮忛渶瑕佹垜浠皢浜嬩欢鐩戝惉缁戝畾鍦?rootScope涓婏紝渚嬪锛?/p>
JavaScript
angular
.module('MyApp')
.controller('MyController', ['$scope', '$rootScope', function MyController($scope, $rootScope) {var unbind = $rootScope.$on('someComponent.someCrazyEvent', function(){ console.log('foo');});$scope.$on('$destroy', unbind);
}
]);
浣嗘槸杩欑鏂瑰紡鏈夌偣绻佺悙锛屽畾涔夊涓簨浠跺鐞嗗嚱鏁版椂鏁翠釜浜洪兘涓嶅ソ浜嗭紝鎵€浠ユ垜浠潵鏀硅繘涓€涓?/p>
鍒╃敤瑁呴グ鍣ㄦ潵瀹氫箟涓€涓柊鐨勪簨浠剁粦瀹氬嚱鏁帮細
JavaScript
angular
.module('MyApp')
.config(['$provide', function($provide){
$provide.decorator('$rootScope', ['$delegate', function($delegate){Object.defineProperty($delegate.constructor.prototype, '$onRootScope', { value: function(name, listener){ var unsubscribe = $delegate.$on(name, listener); this.$on('$destroy', unsubscribe); return unsubscribe; }, enumerable: false});return $delegate;
}]);
}]);
閭ｄ箞鎴戜滑鍦ㄦ帶鍒跺櫒涓畾涔変簨浠跺鐞嗗嚱鏁版椂锛?/p>
JavaScript
angular
.module('MyApp')
.controller('MyController', ['$scope', function MyController($scope) {$scope.$onRootScope('someComponent.someCrazyEvent', function(){ console.log('foo');});
}
]); 涓汉寮虹儓鎺ㄨ崘姝ょ鍋氭硶
绗笁绉嶆柟寮?/p>
鍒╃敤angularJS涓璼ervice鍗曚緥妯″紡鐨勭壒鎬э紝鏈嶅姟(service)鎻愪緵浜嗕竴绉嶈兘鍦ㄥ簲鐢ㄧ殑鏁翠釜鐢熷懡鍛ㄦ湡鍐呬繚鎸佹暟鎹殑鏂瑰紡锛岃兘澶熷湪鎺у埗鍣ㄤ箣闂磋繘琛岄€氫俊锛屼笖鑳戒繚璇佹暟鎹殑涓€鑷存€с€?/p>
涓€鑸垜浠兘浼氬皝瑁卻erver鏉ヤ负搴旂敤鎻愪緵璁块棶鏁版嵁鐨勬帴鍙ｏ紝鎴栬€呰窡杩滅▼杩涜鏁版嵁浜や簰銆?/p>
绀轰緥
JavaScript
var myApp = angular.module("myApp", []);
myApp.factory('Data', function() {
return {
name: "Ting"
}
});
myApp.controller('FirstCtrl', function($scope, Data) {
$scope.data = Data;
$scope.setName = function() {
Data.name = "Jack";
}
});
myApp.controller('SecondCtrl', function($scope, Data) {
$scope.data = Data;
$scope.setName = function() {
Data.name = "Moby";
}
});