为什么声明隔离范围会阻止$发出事件？

Question

我正在使用一个控制器作为子范围的指令,我正试图让它们说话.似乎当我从子控制器发出一个事件时,父指令只能在没有声明隔离范围的情况下听到这个事件.为什么在我的指令块中声明一个隔离范围$ emit会听到事件？

HTML

<flippy data-click-toggle="true" data-mouseover-toggle="true">
    <flippy-front>
      <div ng-controller="test">
        <div class="test" ng-click="flip()">
          front
        </div>
      </div>
    </flippy-front>
    <flippy-back>
      <div ng-controller="test">
        <div class="test" ng-click="flip()">
          back
        </div>
      </div>
    </flippy-back>
</flippy>

JS

poop = angular.module('angular-flippy', []);

poop.directive('flippy', function() {
  return {
    restrict: 'E',
    scope: {},              <------- works when isolate scope not declared
    link: function($scope, $elem, $attrs) {

        var flip = function() {
                $elem.toggleClass('flipped');
            }

        $scope.$on("flipped", flip);

    }
  };
});

poop.controller('test', ['$scope', function($scope) {
    $scope.flip = function() {
      $scope.$emit("flipped");
    };
}]);

codepen:http: //codepen.io/anon/pen/xzteC

Answer 1

这是因为您的控制器范围不是指令的子范围.

如果您调试应用程序,您将看到

-->$rootScope (id: 002)
  -->directive scope (id: 003)
  -->first controller scope (id: 004)
  -->second controller scope (id: 005)

如您所见,指令范围和控制器范围是兄弟姐妹 - 监听事件所需的关系父子不存在.

它可以省略,scope:{}因为你的指令使用rootScope作为自己的作用域,因此它成为test控制器作用域的父级.

检查控制台日志以查看此结构:http://codepen.io/anon/pen/tiGEy.(观察$parent对象的属性)