Javascript Angularjs指令使用事件StopRopagation在外部单击时关闭

当在对话框外部单击时，我使用指令关闭对话框

我必须使用event.stopPropagation，以便“打开”按钮不会关闭它。
它是有效的，但我觉得使用stopPropagation不是正确的方法，
有更好的方法吗？
或者使用stopPropagation可以吗

我想用按钮或程序打开对话框。我希望它在外部单击时关闭

这是我完整的工作示例

var myApp=angular.module（'myApp'，[]）；
控制器（'myCtrl'，['$scope'，函数（$scope）{
$scope.dialogOpen=false；
$scope.closeDialog=函数（）{
console.log（“关闭”）；
$scope.dialogOpen=false；
};
$scope.openDialog=函数（$event）{
$event.stopPropagation（）；
控制台日志（“打开”）；
$scope.dialogOpen=true；
};
}]);
myApp.directive（'myDialog'，['$document'，function（$document）{
返回{
限制：“A”，
是的，
范围：{
“关闭”：“&”
},
模板：“”，
链接：功能（范围、元素）{
变量处理程序=函数（事件）{
如果（！元素[0]。包含（event.target））{
log（“单击外部”）；
scope.apply（scope.close（））；
}
};
log（'creatinghandler'）；
$document.on（'click'，handler）；
作用域.$on（“$destroy”，函数（）{
$document.off（'click'，handler）；
});
}
};
}]);

应该是

scope.$apply（scope.close）而不是
scope.$apply（scope.close（））其他代码看起来不错，应该是
scope.$apply（scope.close）而不是
scope.$apply（scope.close（））其他代码一目了然
var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', ['$scope', function($scope) {
  $scope.dialogOpen = false;

  $scope.closeDialog = function() {
    console.log('closing');
    $scope.dialogOpen = false;
  };

  $scope.openDialog = function($event) {
    $event.stopPropagation();
    console.log('opening');
    $scope.dialogOpen = true;
  };
}]);

myApp.directive('myDialog', ['$document', function($document) {
  return {
    restrict: 'A',
    transclude: true,
    scope: {
      'close': '&'
    },
    template: "<div ng-transclude></div>",
    link: function(scope, element) {
      var handler = function(event) {
        if (!element[0].contains(event.target)) {
          console.log('click outside');
          scope.$apply(scope.close());
        }
      };

      console.log('creating handler');
      $document.on('click', handler);

      scope.$on('$destroy', function() {
        $document.off('click', handler);
      });

    }
  };
}]);