Как обнаружить клики за пределами области действия в angularjs

Question

У меня есть угловой контроллер, который необходимо сбросить всякий раз, когда пользователь щелкает за пределы области действия контроллера. Как мне это сделать?

Образец HTML:

<div id='parent'> 
    <div id='1' ng-controller="ctrl1"> 
     <!--other things--> 
    </div> 

    <div id='2' ng-controller="ctrl2"> 
     <!--other things--> 
    </div> 
</div> 
<div id="parent2"> 
     <!--other things--> 
</div> 

Я хочу, чтобы иметь возможность сбросить Упр 2, если щелчок происходит вне ctr2, когда щелчок происходит вне div2

CTR2 имеет функцию сброса определяется внутри

Answer 1

Вы можете использовать $rootScope для трансляции событий на другие контроллеры. См. Этот JSFiddle: http://jsfiddle.net/simpulton/XqDxG/

Answer 2

Если вам нужен сброс, когда щелчок происходит в div-сиблинге, то тот факт, что контроллеры совместно используют $scope, должен сделать это довольно простым. Если вы хотите сбросить DIV, когда щелчок происходит где-либо на странице, то вы должны установить «перезагрузкой» DIV в качестве директивы связывания $window объекта в обработчик щелчка:

app.directive('reset', function($window){ 
    return { 
    template: '<div ng-class="{red: directiveToggler}">I\'m in 2' + 
       ' - click me to turn red, click anywhere else to turn me normal'+ 
       '</div>', 
    controller: function($scope){ 
    $scope.directiveToggler = true; 
    }, 
    link: function(scope, element){ 

    var w = angular.element($window); 
    w.bind('click', function(e){ 

     if (e.target != element[0].children[0]){ 
     scope.directiveToggler = false; 
     scope.$apply(); 

     } else { 
     scope.directiveToggler = true; 
     scope.$apply() 
     } 
    }) 
    } 
    } 
}) 

Заметим, что есть, вероятно, лучшие способы обработки изменений класса/стиля, чем то, что я настроил, но вопрос был о событиях кликов;).

Here's a plunk to demo