$ විෂය පථය. $ විමෝචනය සහ $ විෂය පථය සමඟ වැඩ කිරීම

මම කොහොමද මගේ යැවිය හැක $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 - විෂය පථය හරහා සිද්ධිය ඉහළට යවයි.

ඔබගේ පාලක (විෂය පථ) සම්බන්ධතාවය ගැන මම කිසිවක් නොදනිමි, නමුත් විකල්ප කිහිපයක් තිබේ:

1. විෂය පථය නම් 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); });
   }

2. ඔබගේ විෂය පථයන් අතර මාපිය-ළමා සම්බන්ධතාවයක් නොමැති නම්, ඔබට පාලකයට එන්නත් $rootScopeකර සිද්ධිය සියලුම ළමා විෂය පථයන්ට විකාශනය කළ හැකිය (එනම් secondCtrl).

   function firstCtrl($rootScope)
   {
       $rootScope.$broadcast('someEvent', [1,2,3]);
   }

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]);
   }

Bzbynour විසින් යෝජිත විකල්පයන්ට වඩා හොඳ විකල්පයක් ලෙස මම 4 වන විකල්පය යෝජනා කරමි.

භාවිතා $rootScope.$emitකරනවාට වඩා $rootScope.$broadcastනොතකා පාලකය trasmitting සහ ලබා අතර ඇති සම්බන්ධතාවය පිළිබඳව. ඒ ආකාරයෙන්, කුලකයකි තුළ මෙම අවස්ථාවට දේහය $rootScope.$$listenersසමග ඇති ෙහයින්ද $rootScope.$broadcastඉන් බොහොමයක් සමහරවිට කෙසේ හෝ එම සිදුවීමට අසන්නන්ට වනු ඇත සියලු දරුවන් විෂය පථ සඳහා මෙම අවස්ථාවට ප්රචාරණය. ඇත්ත වශයෙන්ම ලැබීමේ පාලකයේ අවසානයේ ඔබ භාවිතා කරයි $rootScope.$on.

මෙම විකල්පය සඳහා ඔබ පාලකයේ rootScope සවන්දෙන්නන් විනාශ කිරීමට මතක තබා ගත යුතුය:

var unbindEventHandler = $rootScope.$on('myEvent', myHandler);
$scope.$on('$destroy', function () {
  unbindEventHandler();
});

මගේ $ විෂය පථය එක් පාලකයකින් තවත් පාලකයෙකුට යවන්නේ කෙසේද? $ විමෝචන සහ. Methods ක්‍රම මත?

App විෂය පථය ඇතුළුව ඔබගේ යෙදුමේ ධූරාවලිය තුළ ඔබට අවශ්‍ය ඕනෑම වස්තුවක් යැවිය හැකිය .

විකාශනය සහ විමෝචනය ක්‍රියා කරන ආකාරය පිළිබඳ ඉක්මන් අදහසක් මෙන්න .

පහත නෝඩ් සැලකිල්ලට ගන්න; සියල්ලම නෝඩ් 3 තුළ කූඩු කර ඇත. ඔබට මෙම අවස්ථාව ඇති විට ඔබ විකාශනය සහ විමෝචනය භාවිතා කරයි .

සටහන: මෙම උදාහරණයේ ඇති එක් එක් නෝඩයේ සංඛ්‍යාව අත්තනෝමතික ය; එය පහසුවෙන් අංක එක විය හැකිය; අංක දෙක; හෝ අංක 1,348 පවා. සෑම සංඛ්‍යාවක්ම මෙම උදාහරණය සඳහා හඳුනාගැනීමක් පමණි. මෙම උදාහරණයේ කාරණය වන්නේ කෝණික පාලක / විධානයන් කැදැල්ල පෙන්වීමයි.

                 3
           ------------
           |          |
         -----     ------
         1   |     2    |
      ---   ---   ---  ---
      | |   | |   | |  | |

මෙම ගස බලන්න. පහත සඳහන් ප්‍රශ්නවලට ඔබ පිළිතුරු දෙන්නේ කෙසේද?

සටහන: මෙම ප්‍රශ්නවලට පිළිතුරු දීමට වෙනත් ක්‍රම තිබේ, නමුත් මෙහිදී අපි විකාශනය සහ විමෝචනය සාකච්ඡා කරමු . එසේම, පහත පෙළ කියවන විට සෑම අංකයකටම තමන්ගේම ගොනුවක් (විධානය, පාලකය) ex one.js, two.js, three.js ඇතැයි උපකල්පනය කරන්න.

නෝඩ් 1 නෝඩ් 3 ට කථා කරන්නේ කෙසේද ?

One.js ගොනුවේ

scope.$emit('messageOne', someValue(s));

Three.js ගොනුවේ - සන්නිවේදනය සඳහා අවශ්‍ය සියලුම ළමා නෝඩ් සඳහා ඉහළම නෝඩය.

scope.$on('messageOne', someValue(s));

නෝඩ් 2 නෝඩ් 3 ට කථා කරන්නේ කෙසේද?

ගොනුවේ two.js

scope.$emit('messageTwo', someValue(s));

Three.js ගොනුවේ - සන්නිවේදනය සඳහා අවශ්‍ය සියලුම ළමා නෝඩ් සඳහා ඉහළම නෝඩය.

scope.$on('messageTwo', someValue(s));

නෝඩ් 3 නෝඩ් 1 සහ / හෝ නෝඩ් 2 සමඟ කතා කරන්නේ කෙසේද?

Three.js ගොනුවේ - සන්නිවේදනය සඳහා අවශ්‍ය සියලුම ළමා නෝඩ් සඳහා ඉහළම නෝඩය.

scope.$broadcast('messageThree', someValue(s));

ගොනුව තුළ one.js && two.js ඔබ පණිවුඩය හෝ දෙකම අල්ලා ගැනීමට අවශ්ය කරුණු දෙකෙන් ගොනුව.

scope.$on('messageThree', someValue(s));

නෝඩ් 2 නෝඩ් 1 ට කථා කරන්නේ කෙසේද?

ගොනුවේ two.js

scope.$emit('messageTwo', someValue(s));

Three.js ගොනුවේ - සන්නිවේදනය සඳහා අවශ්‍ය සියලුම ළමා නෝඩ් සඳහා ඉහළම නෝඩය.

scope.$on('messageTwo', function( event, data ){
  scope.$broadcast( 'messageTwo', data );
});

One.js ගොනුවේ

scope.$on('messageTwo', someValue(s));

කෙසේවෙතත්

ඔබට මේ සියලු කැදැලි ළමා නෝඩ් මේ ආකාරයට සන්නිවේදනය කිරීමට උත්සාහ කරන විට, ඔබට ඉක්මනින් $ on , $ විකාශන සහ $ විමෝචන බොහෝමයක් පෙනෙනු ඇත .

මෙන්න මම කරන්න කැමති දේ.

ඉහළම PARENT NODE හි ( 3 මේ අවස්ථාවේ ...), එය ඔබේ මව් පාලකය විය හැකිය ...

එබැවින්, file.js ගොනුවේ

scope.$on('pushChangesToAllNodes', function( event, message ){
  scope.$broadcast( message.name, message.data );
});

දැන් ඕනෑම ළමා නෝඩ් එකක ඔබට අවශ්‍ය වන්නේ message පණිවිඩය විමෝචනය කිරීම හෝ catch on භාවිතයෙන් එය අල්ලා ගැනීම පමණි .

සටහන: සාමාන්‍යයෙන් විමෝචනය , $ විකාශනය හෝ $ භාවිතා නොකර එක් කැදැල්ලක කතා කිරීම පහසුය , එයින් අදහස් කරන්නේ බොහෝ විට භාවිතා වන්නේ ඔබ නෝඩ් 1 ලබා ගැනීමට උත්සාහ කරන විට හෝ නෝඩ් 2 සමඟ සන්නිවේදනය කිරීමට හෝ අනෙක් අතට.

නෝඩ් 2 නෝඩ් 1 ට කථා කරන්නේ කෙසේද?

ගොනුවේ two.js

scope.$emit('pushChangesToAllNodes', sendNewChanges());

function sendNewChanges(){ // for some event.
  return { name: 'talkToOne', data: [1,2,3] };
}

Three.js ගොනුවේ - සන්නිවේදනය සඳහා අවශ්‍ය සියලුම ළමා නෝඩ් සඳහා ඉහළම නෝඩය.

අපි දැනටමත් මෙය හසුරුවා තිබේද?

One.js ගොනුවේ

scope.$on('talkToOne', function( event, arrayOfNumbers ){
  arrayOfNumbers.forEach(function(number){
    console.log(number);
  });
});

ඔබට අල්ලා ගැනීමට අවශ්‍ය සෑම නිශ්චිත අගයක් සමඟම ඔබට තවමත් $ on භාවිතා කිරීමට අවශ්‍ය වනු ඇත , නමුත් දැන් අපි අල්ලාගෙන විකාශනය කරන විට මව් නෝඩ් පරතරය හරහා පණිවිඩය ලබා ගන්නේ කෙසේද යන්න ගැන කරදර නොවී ඔබට ඕනෑම නෝඩ් එකක ඔබ කැමති ඕනෑම දෙයක් නිර්මාණය කළ හැකිය. සාමාන්‍ය තල්ලු කිරීම චැන්ජෙස්ටෝඇල්නෝඩ්ස් .

මෙය උපකාරී වේ යැයි සිතමු ...

$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. On විෂය පථය විනාශ වූ විගස $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

$ විමෝචන සහ $ විකාශනයේ ඇති ප්‍රධාන වෙනස නම් $ rootScope. $ විමෝචන සිදුවීම $ rootScope. $ භාවිතයෙන් සවන් දිය යුතුය. .
මෙම අවස්ථාවේදී $ විකාශනයේදී මෙන් ඔබ සවන්දෙන්නන් විනාශ කළ යුතුය.

සංස්කරණය කරන්න:

මම භාවිතා කිරීමට $rootScope.$broadcast + $scope.$onනොව භාවිතා කිරීමට කැමැත්තෙමි $rootScope.$emit+ $rootScope.$on. මෙම $rootScope.$broadcast + $scope.$oncombo බරපතල කාර්ය සාධන ගැටළු ඇති විය හැක. එයට හේතුව සිදුවීම සියලු විෂය පථයන් හරහා බුබුලු වැටෙනු ඇත.

සංස්කරණය 2 :

මෙම පිළිතුරෙහි ඇති ගැටළුව angular.js අනුවාදය 1.2.7 මගින් විසඳා ඇත. $ විකාශනය දැන් ලියාපදිංචි නොකළ විෂය පථයන් මත බුබුලු ගැසීම වළක්වන අතර $ විමෝචනය තරම් වේගයෙන් ධාවනය වේ.

එකම යෙදුමක පාලකයන් අතර සිදුවීම් යැවීමට සහ ග්‍රහණය කර ගැනීමට ඔබ $ rootScope භාවිතා කළ යුතුය. ඔබගේ පාලකයන්ට $ 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); });
        }
}

$ විෂය පථයට සම්බන්ධ කර ඇති සිදුවීම් අයිතිකරු පාලකයේ ක්‍රියාත්මක වේ. පාලකයන් අතර සන්නිවේදනය $ rootScope හෝ Services හරහා සිදු කෙරේ.

පොරොන්දුවක් ලබා දෙන පාලකය වෙතින් ඔබට සේවාවක් අමතා එය ඔබගේ පාලකයේ භාවිතා කළ හැකිය. තව දුරටත් භාවිතා කිරීම $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>

ළමයින්ට හෝ දෙමව්පියන්ට සිදුවීම ප්‍රචාරය කිරීමට, යැවීමට විෂය පථය භාවිතා කළ හැකිය.

it විමෝචනය - සිද්ධිය දෙමාපියන්ට ප්‍රචාරය කිරීම. $ විකාශනය - සිද්ධිය ළමයින්ට ප්‍රචාරය කරයි. $ විමෝචනය සහ $ විකාශනය මගින් ප්‍රචාරය කරන ලද සිදුවීම් සවන් දීමේ ක්‍රමය.

උදාහරණ index.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/

පහත කේතය මඟින් උප පාලකයන් දෙදෙනාගේ සිදුවීම් මව් පාලකයට ඉහළට යවනු ලැබේ (rootScope)

<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);   
    }
}

http://jsfiddle.net/shushanthp/zp6v0rut/

Angularjs සිද්ධි ලේඛනයට අනුව, ලැබීමේ අවසානය වැනි ව්‍යුහයක් සහිත තර්ක අඩංගු විය යුතුය

පැරාම්ස්

- {වස්තුව} සිද්ධිය යනු සිද්ධිය පිළිබඳ තොරතුරු අඩංගු සිදුවීම් වස්තුවයි

- {වස්තුව} ආගන්තුකය විසින් සම්මත කරනු ලැබේ (මෙය සෑම විටම ශබ්ද කෝෂ වස්තුවක් යැවීමට වඩා හොඳ එකක් පමණක් බව සලකන්න)

$scope.$on('fooEvent', function (event, args) { console.log(args) }); ඔබේ කේතයෙන්

විවිධ පාලකයන් හරහා බෙදාහදා ගත හැකි තොරතුරු ලබා ගැනීමට ඔබ උත්සාහ කරන්නේ නම් එය සාක්ෂාත් කර ගැනීම සඳහා තවත් ක්‍රමයක් තිබේ. එය කෝණික සේවා වේ. සේවාවන් තනි බොත්තම් බැවින් පාලකයන් හරහා තොරතුරු ගබඩා කර ලබා ගත හැකිය. එම සේවාවේ සැකසුම් කාර්යයන්, මෙම කාර්යයන් හෙළිදරව් කිරීම, සේවාවේ ගෝලීය විචල්‍යයන් ඇති කිරීම සහ තොරතුරු ගබඩා කිරීම සඳහා ඒවා භාවිතා කිරීම

පහසුම ක්‍රමය:

HTML

  <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>