Angular JS Eventos 20141030

by scyrizales

HTML

<div ng-app="myApp">
    <div ng-controller="Ctrl1" class="c1">
        <span>{{prop1}}</span>
        <button ng-click="click1()">
            Click
        </button>
        <div ng-controller="Ctrl2" class="c2">
            <span>{{prop2}}</span>
            <button ng-click="click2()">
                Click
            </button>
        </div>
    </div>
</div>

CSS

.c1 {
    border: 2px solid red;
    padding: 5px;
}

.c2 {
    border: 2px solid green;
    padding: 5px;
}

JavaScript

angular.module("myApp", []);

angular.module("myApp")
.controller("Ctrl1",
            ["$scope", 
             function($scope) {
                 $scope.click1 = function() {
                     $scope.$broadcast("evento1", "dato1");
                 };
                 
                 $scope.$on("evento2", function(e, d) {
                     $scope.prop1 = d;
                 });
             }]);

angular.module("myApp")
.controller("Ctrl2",
            ["$scope", "$rootScope", 
             function($scope, $rootScope) {
                 $scope.$on("evento1", function(e, d) {
                     $scope.prop2 = d;
                 });
                 
                 $rootScope.$on("evento2", function(e, d) {
                     $scope.prop2 = $scope.prop2 + " - " + d;
                 });
                 
                 $scope.click2 = function() {
                     $rootScope.$broadcast("evento2", "dato2");
                 };
             }]);