ถ้าคุณต้องการเรียกตัวควบคุมหนึ่งไปยังอีกตัวหนึ่งมีสี่วิธีให้เลือก
- $ rootScope. $ emit () และ $ rootScope. $ ออกอากาศ ()
- หากคอนโทรลเลอร์ตัวที่สองคือลูกคุณสามารถใช้การสื่อสารลูกแม่
- ใช้บริการ
- ชนิดของการแฮ็ค - ด้วยความช่วยเหลือของเชิงมุมองค์ประกอบ ()
1. $ rootScope. $ emit () และ $ rootScope. $ ออกอากาศ ()
คอนโทรลเลอร์และขอบเขตของมันสามารถถูกทำลายได้ แต่ $ rootScope ยังคงอยู่ในแอปพลิเคชันนั่นคือเหตุผลที่เรารับ $ rootScope เพราะ $ rootScope เป็นแหล่งกำเนิดของขอบเขตทั้งหมด
หากคุณทำการสื่อสารจากผู้ปกครองไปยังเด็กและแม้กระทั่งเด็กต้องการที่จะสื่อสารกับพี่น้องของคุณคุณสามารถใช้ $ ออกอากาศ
หากคุณทำการสื่อสารจากเด็กไปยังผู้ปกครองไม่มีพี่น้องที่ invovled คุณสามารถใช้ $ rootScope ได้ $ emit
HTML
<body ng-app="myApp">
<div ng-controller="ParentCtrl" class="ng-scope">
// ParentCtrl
<div ng-controller="Sibling1" class="ng-scope">
// Sibling first controller
</div>
<div ng-controller="Sibling2" class="ng-scope">
// Sibling Second controller
<div ng-controller="Child" class="ng-scope">
// Child controller
</div>
</div>
</div>
</body>
รหัส Angularjs
var app = angular.module('myApp',[]);//We will use it throughout the example
app.controller('Child', function($rootScope) {
$rootScope.$emit('childEmit', 'Child calling parent');
$rootScope.$broadcast('siblingAndParent');
});
app.controller('Sibling1', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling one');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('Sibling2', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling two');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('ParentCtrl', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside parent controller');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
ในโค้ดคอนโซลด้านบนของ $ emit 'childEmit' จะไม่เรียกภายในพี่น้องเด็กและมันจะโทรภายใน parent เท่านั้นโดยที่ $ broadcast ถูกเรียกภายในพี่น้องและผู้ปกครองด้วยนี่คือสถานที่ที่ประสิทธิภาพเข้าสู่การดำเนินการ $ emit คือ ดีกว่าถ้าคุณใช้การสื่อสารลูกกับผู้ปกครองเพราะข้ามการตรวจสอบสกปรกบางอย่าง
2. หากคอนโทรลเลอร์ตัวที่สองเป็นลูกคุณสามารถใช้การสื่อสารหลักได้
เป็นหนึ่งในวิธีที่ดีที่สุดหากคุณต้องการสื่อสารกับผู้ปกครองของเด็กที่เด็กต้องการสื่อสารกับผู้ปกครองทันทีมันไม่จำเป็นต้องมี $ broadcast หรือ $ emit ใด ๆ แต่ถ้าคุณต้องการสื่อสารจาก parent ถึง child คุณต้อง ใช้บริการอย่างใดอย่างหนึ่งหรือ $ ออกอากาศ
ตัวอย่างเช่น HTML: -
<div ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl">
</div>
</div>
Angularjs
app.controller('ParentCtrl', function($scope) {
$scope.value='Its parent';
});
app.controller('ChildCtrl', function($scope) {
console.log($scope.value);
});
เมื่อใดก็ตามที่คุณใช้การสื่อสารลูกกับผู้ปกครอง Angularjs จะค้นหาตัวแปรภายในลูกถ้าไม่อยู่ข้างในก็จะเลือกดูค่าภายในตัวควบคุมหลัก
3. ใช้บริการ
AngularJS สนับสนุนแนวคิดของ"การแยกความกังวล"โดยใช้สถาปัตยกรรมบริการ บริการเป็นฟังก์ชั่นจาวาสคริปต์และมีความรับผิดชอบในการทำงานที่เฉพาะเจาะจงเท่านั้นซึ่งจะทำให้พวกเขาเป็นนิติบุคคลที่สามารถบำรุงรักษาและทดสอบได้บริการที่ใช้ในการฉีดโดยใช้การฉีดขึ้นอยู่กับ mecahnism ของ Angularjs
รหัส Angularjs:
app.service('communicate',function(){
this.communicateValue='Hello';
});
app.controller('ParentCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Parent World");
});
app.controller('ChildCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Child World");
});
มันจะให้ผลลัพธ์ Hello Child World และ Hello Parent World ตามเอกสารเชิงมุมของการบริการSingletons - องค์ประกอบแต่ละขึ้นอยู่กับบริการที่ได้รับการอ้างอิงถึงตัวอย่างเดียวที่สร้างขึ้นโดยโรงงานบริการ
4.Kind of Hacking - ด้วยความช่วยเหลือของ angular.element ()
เมธอดนี้รับขอบเขต () จากองค์ประกอบโดย Id / unique class.angular.element () วิธีการคืนองค์ประกอบและขอบเขต () ให้ตัวแปร $ scope ของตัวแปรอื่นโดยใช้ตัวแปร $ scope ของตัวควบคุมหนึ่งภายในอื่นไม่ปฏิบัติที่ดี
HTML: -
<div id='parent' ng-controller='ParentCtrl'>{{varParent}}
<span ng-click='getValueFromChild()'>Click to get ValueFormChild</span>
<div id='child' ng-controller='childCtrl'>{{varChild}}
<span ng-click='getValueFromParent()'>Click to get ValueFormParent </span>
</div>
</div>
Angularjs: -
app.controller('ParentCtrl',function($scope){
$scope.varParent="Hello Parent";
$scope.getValueFromChild=function(){
var childScope=angular.element('#child').scope();
console.log(childScope.varChild);
}
});
app.controller('ChildCtrl',function($scope){
$scope.varChild="Hello Child";
$scope.getValueFromParent=function(){
var parentScope=angular.element('#parent').scope();
console.log(parentScope.varParent);
}
});
ในตัวควบคุมรหัสข้างต้นจะแสดงค่าของตัวเองใน Html และเมื่อคุณจะคลิกที่ข้อความคุณจะได้รับค่าในคอนโซลตามหากคุณคลิกที่ตัวควบคุมผู้ปกครองช่วงเบราว์เซอร์จะคอนโซลค่าของเด็กและ viceversa