আমি কীভাবে আমার $scopeঅবজেক্টটিকে অন্য নিয়ামক .$emitএবং .$onপদ্ধতি ব্যবহার করে প্রেরণ করতে পারি ?
function firstCtrl($scope) {
$scope.$emit('someEvent', [1,2,3]);
}
function secondCtrl($scope) {
$scope.$on('someEvent', function(mass) { console.log(mass); });
}
এটি যেভাবে আমার মনে করা উচিত সেভাবে এটি কাজ করে না। কিভাবে $emitএবং $onকাজ?
উত্তর:
প্রথমত, পিতামাতার-সন্তানের স্কোপ সম্পর্কটি গুরুত্বপূর্ণ। কিছু ইভেন্ট নির্গত করার জন্য আপনার দুটি সম্ভাবনা রয়েছে:
$broadcast - ইভেন্টটি সমস্ত শিশু স্কোপে নীচে দিকে প্রেরণ করে,$emit - স্কোপ হায়ারার্কির মাধ্যমে ইভেন্টটি উপরের দিকে প্রেরণ করে।আমি আপনার কন্ট্রোলার (স্কোপস) সম্পর্ক সম্পর্কে কিছুই জানি না, তবে বেশ কয়েকটি বিকল্প রয়েছে:
যদি সুযোগ firstCtrlঅভিভাবক হয় secondCtrlসুযোগ আপনার কোড প্রতিস্থাপন কাজ করা উচিত $emitদ্বারা $broadcastমধ্যে firstCtrl:
function firstCtrl($scope)
{
$scope.$broadcast('someEvent', [1,2,3]);
}
function secondCtrl($scope)
{
$scope.$on('someEvent', function(event, mass) { console.log(mass); });
}
আপনার স্কোপের মধ্যে পিতামাতার সাথে সন্তানের সম্পর্ক না থাকলে আপনি $rootScopeকন্ট্রোলারে ইনজেকশন করতে পারেন এবং ইভেন্টটি সমস্ত শিশু স্কোপে (যেমনটিও secondCtrl) সম্প্রচার করতে পারেন ।
function firstCtrl($rootScope)
{
$rootScope.$broadcast('someEvent', [1,2,3]);
}
অবশেষে, যখন আপনার শিশু নিয়ামক থেকে স্কোপগুলি উপরের দিকে প্রেরণের প্রয়োজন হয় আপনি ব্যবহার করতে পারেন $scope.$emit। যদি সুযোগটি স্কোপের firstCtrlমূল হয় secondCtrl:
function firstCtrl($scope)
{
$scope.$on('someEvent', function(event, data) { console.log(data); });
}
function secondCtrl($scope)
{
$scope.$emit('someEvent', [1,2,3]);
}
$rootScopeআপনার পরিষেবাতে ইনজেকশন করতে পারেন এবং পরিষেবাটি থেকে ইভেন্টটি সম্প্রচার করতে পারেন।
$rootScope- তবে আমি জানতে চাই যে যদি আমি কোনও পরিষেবা থেকে (অফ $rootScope) বন্ধ করে দিয়েছি তবে ইভেন্টটি এখনও প্রবেশ করিয়ে দেবে $rootScope; কারণ, যদি $broadcastঅনুক্রমগুলি নিম্নরূপটি ডাউন করে, এবং $emitইউপি - পেরকোলিট করে - "ইউপি" এবং "ডাউন" এর পরে কী হয় - যেহেতু সম্প্রচারক / ইমিটারও শ্রোতা (?)। আমি যদি ইভেন্টটি সমস্ত "আপওয়ার্ড" এবং সমস্ত "ডাউনওয়ার্ড" স্কোপগুলিতে চুপ করে থাকি তবে কেবল প্রেরণের মতো একই স্তরে 'শ্রুতিমধুর' হতে পারি?
আমি অতিরিক্তভাবে @Zbynour দ্বারা প্রস্তাবিত বিকল্পগুলির আরও ভাল বিকল্প হিসাবে একটি চতুর্থ বিকল্পটি প্রস্তাব করব।
ব্যবহার করুন $rootScope.$emitবদলে $rootScope.$broadcasttrasmitting এবং নিয়ামক গ্রহণ মধ্যে সম্পর্ক নির্বিশেষে। এই ভাবে, সেট মধ্যে ঘটনা দেহাবশেষ $rootScope.$$listenersসঙ্গে যেহেতু $rootScope.$broadcastসব শিশুদের সুযোগ, যার বেশিরভাগ সম্ভবত যাহাই হউক না কেন যে ঘটনার শ্রোতাকে হবে না ইভেন্টের বংশ বিস্তার। এবং অবশ্যই নিয়ামকের প্রাপ্তিতে আপনি কেবল ব্যবহার করেন $rootScope.$on।
এই বিকল্পের জন্য আপনাকে অবশ্যই নিয়ামকের রুটস্কোপ শ্রোতাদের ধ্বংস করতে হবে:
var unbindEventHandler = $rootScope.$on('myEvent', myHandler);
$scope.$on('$destroy', function () {
unbindEventHandler();
});
$rootScopeইনজেকশন প্রয়োজন (সাধারণভাবে যা প্রয়োজন হয় না)। তবে অবশ্যই অন্য একটি বিকল্প, THX!
আমি কীভাবে আমার $ স্কোপ অবজেক্টটি একজন নিয়ন্ত্রণকারী থেকে অন্যটিতে প্রেরণ করতে পারি। নির্গত এবং mit পদ্ধতিতে?
আপনি নিজের অ্যাপ্লিকেশনটির হায়ারার্কির মধ্যে want স্কোপ সহ যে কোনও অবজেক্টটি প্রেরণ করতে পারবেন ।
এখানে সম্প্রচার এবং নির্গতকরণ কীভাবে কাজ করবে সে সম্পর্কে একটি দ্রুত ধারণা দেওয়া হয়েছে idea
নীচের নোডগুলি লক্ষ্য করুন; সব নোড 3. আপনি ব্যবহার মধ্যে নেস্টেড সম্প্রচারের এবং নির্গত আপনি এই দৃশ্যকল্প আছে।
দ্রষ্টব্য: এই উদাহরণে প্রতিটি নোডের সংখ্যা নির্বিচারে; এটি সহজেই প্রথম এক হতে পারে; দুই নম্বর; বা এমনকি সংখ্যা 1,348। প্রতিটি সংখ্যা এই উদাহরণের জন্য কেবল একটি সনাক্তকারী। এই উদাহরণের মূল বিষয়টি হল কৌণিক নিয়ন্ত্রণকারী / নির্দেশিকাগুলির বাসা বাঁধাই।
3
------------
| |
----- ------
1 | 2 |
--- --- --- ---
| | | | | | | |
এই গাছটি দেখুন। আপনি নিম্নলিখিত প্রশ্নগুলির উত্তর কীভাবে দেবেন?
দ্রষ্টব্য: এই প্রশ্নের উত্তর দেওয়ার অন্যান্য উপায় রয়েছে তবে এখানে আমরা সম্প্রচার এবং নির্গমন নিয়ে আলোচনা করব । এছাড়াও, পাঠ্যের নীচে পড়ার সময় প্রতিটি সংখ্যার নিজস্ব ফাইল (নির্দেশিকা, নিয়ন্ত্রক) প্রাক্তন one.js, two.js, three.js রয়েছে বলে ধরে নিন।
নোড 1 নোড 3 এর সাথে কীভাবে কথা বলতে পারে ?
ওয়ান.জেএস ফাইল- এ
scope.$emit('messageOne', someValue(s));থ্রি.জেএস ফাইল - সমস্ত বাচ্চাদের যোগাযোগের জন্য নোডের উপরের নোড।
scope.$on('messageOne', someValue(s));নোড 2 নোড 3 এর সাথে কীভাবে কথা বলতে পারে?
Two.js ফাইল এ
scope.$emit('messageTwo', someValue(s));থ্রি.জেএস ফাইল - সমস্ত বাচ্চাদের যোগাযোগের জন্য নোডের উপরের নোড।
scope.$on('messageTwo', someValue(s));নোড 3 নোড 1 এবং / অথবা নোড 2 এর সাথে কীভাবে কথা বলতে পারে?
থ্রি.জেএস ফাইল - সমস্ত বাচ্চাদের যোগাযোগের জন্য নোডের উপরের নোড।
scope.$broadcast('messageThree', someValue(s));ফাইলের মধ্যে one.js && two.js যেটা আপনি যে ফাইলটি বার্তা বা উভয় ধরতে চাই।
scope.$on('messageThree', someValue(s));নোড 2 নোড 1 এর সাথে কীভাবে কথা বলতে পারে?
Two.js ফাইল এ
scope.$emit('messageTwo', someValue(s));থ্রি.জেএস ফাইল - সমস্ত বাচ্চাদের যোগাযোগের জন্য নোডের উপরের নোড।
scope.$on('messageTwo', function( event, data ){
scope.$broadcast( 'messageTwo', data );
});
ওয়ান.জেএস ফাইল- এ
scope.$on('messageTwo', someValue(s));যাহোক
আপনি ভালো যোগাযোগ করার চেষ্টা সব নেস্টেড শিশু নোড আছে, আপনি দ্রুত অনেক দেখতে হবে এর উপর $ , $ সম্প্রচারের এর , এবং নির্গত এর $ ।
আমি যা করতে চাই তা এখানে।
উপরের প্যারেন্ট নোডে ( এই ক্ষেত্রে 3 ...), যা আপনার পিতামাতার নিয়ামক হতে পারে ...
সুতরাং, ফাইলের মধ্যে Three.js
scope.$on('pushChangesToAllNodes', function( event, message ){
scope.$broadcast( message.name, message.data );
});
এখন সন্তানের নোড কোনো আপনি শুধুমাত্র প্রয়োজন নির্গত $ বার্তা বা ব্যবহার করে এটি ধরা এ $ ।
দ্রষ্টব্য: সাধারণত $ এমিট , $ সম্প্রচার বা using অন ব্যবহার না করেই কোনও নেস্টেড পথে আলাপটি অতিক্রম করা সহজ , যার অর্থ আপনি যখন নোড 2 বা তদ্বিপরীতভাবে যোগাযোগ করার জন্য নোড 1 পাওয়ার চেষ্টা করছেন তখন বেশিরভাগ ব্যবহারের ক্ষেত্রে হয়।
নোড 2 নোড 1 এর সাথে কীভাবে কথা বলতে পারে?
Two.js ফাইল এ
scope.$emit('pushChangesToAllNodes', sendNewChanges());
function sendNewChanges(){ // for some event.
return { name: 'talkToOne', data: [1,2,3] };
}
থ্রি.জেএস ফাইল - সমস্ত বাচ্চাদের যোগাযোগের জন্য নোডের উপরের নোড।
আমরা ইতিমধ্যে এটি মনে রাখবেন একটি পরিচালনা?
ওয়ান.জেএস ফাইল- এ
scope.$on('talkToOne', function( event, arrayOfNumbers ){
arrayOfNumbers.forEach(function(number){
console.log(number);
});
});
আপনি এখনও ব্যবহার করতে হবে এ $ আপনি ধরতে চান প্রতিটি নির্দিষ্ট মান দিয়ে, কিন্তু এখন আপনি হিসাবে আমরা ধরতে এবং আপনার নোড কোনো মত যাই হোক না কেন কিভাবে পিতা বা মাতা নোডের ফাঁক জুড়ে বার্তা পেতে সম্পর্কে চিন্তা না করেও তৈরি করতে পারেন সম্প্রচারের জেনেরিক পুশচেনজেটসঅলনোডস ।
আশাকরি এটা সাহায্য করবে...
The event life cycle starts at the scope on which $broadcast was called. All listeners listening for name event on this scope get notified. সিটিআরটিএল 1 এর সাথে সিটিআরএল 2 এর সাথে কথা বলার ক্ষেত্রে যদি প্রয়োগ করেন তবে আপনি (আমার মতো) একটি অসীম লুপ $on('x', function(e, data) { $broadcast('x', data) })পাবেন। সম্প্রচারের আগে আপনার এই লাইনের প্রয়োজন হবে; if (e.targetScope.$id === $scope.$id) { return; }
$scope objectএকজন নিয়ামক থেকে অন্য একজনকে প্রেরণ করতে, আমি সেগুলি সবচেয়ে বেশি ব্যবহৃত হয় সে সম্পর্কে $rootScope.$broadcastএবং $rootScope.$emitএখানে আলোচনা করব ।
কেস 1 :
। $ RootScope $ সম্প্রচার: -
$rootScope.$broadcast('myEvent',$scope.data);//Here `myEvent` is event name
$rootScope.$on('myEvent', function(event, data) {} //listener on `myEvent` event
$rootScopeশ্রোতা স্বয়ংক্রিয়ভাবে ধ্বংস হয় না। এটি ব্যবহার করে আপনাকে ধ্বংস করতে হবে $destroy। $scope.$onশ্রোতারা $scopeস্বয়ংক্রিয়ভাবে ধ্বংস হয়ে যাওয়ার সাথে সাথে $ স্কোপটি নষ্ট হওয়ার সাথে সাথে ব্যবহার করা ভাল ।
$scope.$on('myEvent', function(event, data) {}অথবা,
var customeEventListener = $rootScope.$on('myEvent', function(event, data) {
}
$scope.$on('$destroy', function() {
customeEventListener();
});
কেস 2:
। $ RootScope নির্গত $:
$rootScope.$emit('myEvent',$scope.data);
$rootScope.$on('myEvent', function(event, data) {}//$scope.$on not works
Mit নির্গত এবং $ সম্প্রচারের মধ্যে প্রধান পার্থক্যটি হ'ল S রুটস্কোপ $ ।
এই ক্ষেত্রে আপনাকে অবশ্যই শ্রোতাদের destroy সম্প্রচারের মতো ধ্বংস করতে হবে।
সম্পাদনা:
আমি ব্যবহার না পছন্দ
$rootScope.$broadcast + $scope.$onকিন্তু ব্যবহার$rootScope.$emit+ $rootScope.$on।$rootScope.$broadcast + $scope.$onকম্বো গুরুতর কর্মক্ষমতা সমস্যা সৃষ্টি করতে পারে। কারণ ইভেন্টটি সমস্ত স্কোপগুলিতে বুদবুদ হবে।
সম্পাদনা 2 :
এই উত্তরে সম্বোধিত সমস্যাটি কৌনিক.জেএস সংস্করণ ১.২..7 সংস্করণে সমাধান করা হয়েছে। $ সম্প্রচার এখন নিবন্ধভুক্ত স্কোপগুলিতে বুদবুদ এড়ানো এবং এমিটের মতো দ্রুত চলে।
একই অ্যাপ্লিকেশনে নিয়ামকদের মধ্যে ইভেন্টগুলি প্রেরণ এবং ক্যাপচারের জন্য আপনাকে অবশ্যই $ রুটস্কোপ ব্যবহার করতে হবে। আপনার নিয়ন্ত্রকগুলিতে rootScope নির্ভরতা ইনজেকশন করুন। এখানে একটি কাজের উদাহরণ।
app.controller('firstCtrl', function($scope, $rootScope) {
function firstCtrl($scope) {
{
$rootScope.$emit('someEvent', [1,2,3]);
}
}
app.controller('secondCtrl', function($scope, $rootScope) {
function secondCtrl($scope)
{
$rootScope.$on('someEvent', function(event, data) { console.log(data); });
}
}
$ স্কোপ অবজেক্টের সাথে লিঙ্ক করা ইভেন্টগুলি কেবল মালিক নিয়ামকের মধ্যে কাজ করে। নিয়ন্ত্রণকারীদের মধ্যে যোগাযোগ $ রুটস্কোপ বা পরিষেবাদিগুলির মাধ্যমে সম্পন্ন হয়।
আপনি আপনার নিয়ামকের কাছ থেকে এমন কোনও পরিষেবা কল করতে পারেন যা কোনও প্রতিশ্রুতি দেয় এবং তারপরে এটি আপনার নিয়ামকটিতে ব্যবহার করতে পারে। এবং আরও ব্যবহার করুন $emitবা $broadcastএটি সম্পর্কে অন্যান্য নিয়ন্ত্রকদের অবহিত করতে। আমার ক্ষেত্রে, আমাকে আমার পরিষেবার মাধ্যমে HTTP কল করতে হয়েছিল, তাই আমি এরকম কিছু করেছি:
function ParentController($scope, testService) {
testService.getList()
.then(function(data) {
$scope.list = testService.list;
})
.finally(function() {
$scope.$emit('listFetched');
})
function ChildController($scope, testService) {
$scope.$on('listFetched', function(event, data) {
// use the data accordingly
})
}এবং আমার পরিষেবাটি দেখতে এমন দেখাচ্ছে
app.service('testService', ['$http', function($http) {
this.list = [];
this.getList = function() {
return $http.get(someUrl)
.then(function(response) {
if (typeof response.data === 'object') {
list = response.data.results;
return response.data;
} else {
// invalid response
return $q.reject(response.data);
}
}, function(response) {
// something went wrong
return $q.reject(response.data);
});
}
}])এটি আমার কাজ:
$rootScope.$emit('setTitle', newVal.full_name);
$rootScope.$on('setTitle', function(event, title) {
if (scope.item)
scope.item.name = title;
else
scope.item = {name: title};
});<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('MyApp',[]);
app.controller('parentCtrl',function($scope){
$scope.$on('MyEvent',function(event,data){
$scope.myData = data;
});
});
app.controller('childCtrl',function($scope){
$scope.fireEvent = function(){
$scope.$emit('MyEvent','Any Data');
}
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="parentCtrl" ng-model="myName">
{{myData}}
<div ng-controller="childCtrl">
<button ng-click="fireEvent()">Fire Event</button>
</div>
</div>
</body>
</html>স্কোপ (গুলি) স্কোপ বাচ্চাদের বা পিতামাতার কাছে ইভেন্ট প্রচার, প্রেরণে ব্যবহার করা যেতে পারে।
mit নির্গমন - ইভেন্টটি পিতামাতার কাছে প্রচার করে। $ সম্প্রচার - ইভেন্টটি বাচ্চাদের কাছে প্রচার করে। listen অন - ইভেন্টগুলি শোনার পদ্ধতি, mit নির্গত এবং $ সম্প্রচার দ্বারা প্রচারিত।
উদাহরণ সূচক html :
<div ng-app="appExample" ng-controller="EventCtrl">
Root(Parent) scope count: {{count}}
<div>
<button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
<button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button><br>
Childrent scope count: {{count}}
</div>
</div>উদাহরণস্বরূপ app.js :
angular.module('appExample', [])
.controller('EventCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.$on('MyEvent', function() {
$scope.count++;
});
}]);আপনি এখানে কোডটি পরীক্ষা করতে পারেন: http://jsfiddle.net/zp6v0rut/41/
নীচে কোড দুটি উপ-নিয়ন্ত্রক দেখায় যেখানে ইভেন্টগুলি উপরের দিকে অভিভাবক নিয়ন্ত্রকের কাছে প্রেরণ করা হয় (রুটস্কোপ)
<body ng-app="App">
<div ng-controller="parentCtrl">
<p>City : {{city}} </p>
<p> Address : {{address}} </p>
<div ng-controller="subCtrlOne">
<input type="text" ng-model="city" />
<button ng-click="getCity(city)">City !!!</button>
</div>
<div ng-controller="subCtrlTwo">
<input type="text" ng-model="address" />
<button ng-click="getAddrress(address)">Address !!!</button>
</div>
</div>
</body>var App = angular.module('App', []);
// parent controller
App.controller('parentCtrl', parentCtrl);
parentCtrl.$inject = ["$scope"];
function parentCtrl($scope) {
$scope.$on('cityBoom', function(events, data) {
$scope.city = data;
});
$scope.$on('addrBoom', function(events, data) {
$scope.address = data;
});
}
// sub controller one
App.controller('subCtrlOne', subCtrlOne);
subCtrlOne.$inject = ['$scope'];
function subCtrlOne($scope) {
$scope.getCity = function(city) {
$scope.$emit('cityBoom', city);
}
}
// sub controller two
App.controller('subCtrlTwo', subCtrlTwo);
subCtrlTwo.$inject = ["$scope"];
function subCtrlTwo($scope) {
$scope.getAddrress = function(addr) {
$scope.$emit('addrBoom', addr);
}
}অ্যাঙ্গুলারজ ইভেন্ট ডক্স অনুসারে প্রাপ্তির শেষের মতো কাঠামোর সাথে যুক্তি থাকা উচিত
@params
- {অবজেক্ট} ইভেন্টটি ইভেন্টের তথ্য সম্বলিত ইভেন্ট অবজেক্ট
- কলি দ্বারা পাস করা} অবজেক্ট} আরোগুলি (নোট করুন যে ডিকশনারি অবজেক্টে সর্বদা প্রেরণ করা কেবল এটির চেয়ে ভাল হতে পারে)
$scope.$on('fooEvent', function (event, args) { console.log(args) });
আপনার কোড থেকে
এছাড়াও যদি আপনি বিভিন্ন কন্ট্রোলার জুড়ে তথ্য ভাগ করে নেওয়ার চেষ্টা করে থাকেন তবে তা অর্জনের আরও একটি উপায় আছে এবং এটি কৌণিক পরিষেবাগুলি রয়েছে services সার্ভিসগুলি সিঙ্গেলনের তথ্যগুলি নিয়ন্ত্রণকারীদের মধ্যে সংরক্ষণ এবং সংগ্রহ করা যায় imp সহজভাবে গেটার তৈরি করুন এবং সেটার মধ্যে সেটার ফাংশনগুলি, এই ফাংশনগুলি উন্মোচিত করে, পরিষেবায় গ্লোবাল ভেরিয়েবল তৈরি করে এবং তথ্য সঞ্চয় করতে তাদের ব্যবহার করে
সহজতম পথ :
এইচটিএমএল
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="sendData();"> Send Data </button>
</div>জাভাস্ক্রিপ্ট
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
function sendData($scope) {
var arrayData = ['sam','rumona','cubby'];
$rootScope.$emit('someEvent', arrayData);
}
});
app.controller('yourCtrl', function($scope, $rootScope) {
$rootScope.$on('someEvent', function(event, data) {
console.log(data);
});
});
</script>
$rootScopeযখন এড়ানো যায় তখন সম্প্রচার / নির্গতের জন্য ব্যবহার করবেন না ।