访问“隐藏”指令范围

Question

我对AngularJs指令比较陌生，我试图了解范围是如何工作的。我想我理解得很好，但后来遇到了如下问题。 我的指示：

<ng-view>
    <div my-directive ng-click="foo()" >...</div>
</ng-view>

指令代码：

app.directive('myDirective',function(){
    return function(scope,element,attrs){
        scope.foo = function(){...}
    }
})

单击元素时我希望foo()触发，但事实并非如此。使用batarang检查范围我看到范围存在（id：＃003），其中rootScope作为其父级，但是当单击元素或其子级时，范围是根（id：＃002），我还检查了{{1}认为它可能是一个蝙蝠问题，但结果是一样的。

更新：我想我找到了问题的原因，在我的真实应用中，当我将我的指令放在ngView之外时，使用该指令的元素位于angular.element($('div[my-directive]')).scope()指令内我在链接函数中定义的属性现在在作用域（rootScope）中可见。我想这是由于异步加载，但我需要确认，在this fiffle中我使用了带有静态模板的ngView，但它不起作用（它有效，我无法重现问题）。

Answer 1

实现此目的的一种方法是在指令中使用模板和转换：

app.directive('myDirective', function () {
   return {
      template: '<div ng-click="foo()" ng-transclude></div>',
      transclude: true,
      controller: function ($scope, $element, $attrs) {
         $scope.foo = function () {...};
      }
   };
});

你的HTML：

<div my-directive>...<div>

这可行的原因是您在指令范围内的中定义foo函数。在您的原始尝试中，foo应该在父范围内。虽然您的指令可能会更改父作用域的foo定义，但这不太可能是您想要的。您实际上是要求您的指令用户了解该指令的内部定义的foo函数。这有点尴尬/倒退。

Answer 2

由于该指令未指定新作用域（scope: true）或隔离作用域（scope: { ... }），或使用转换，因此它将使用HTML中的“作用域”。 / p>

如果您的指令在控制器外部使用，它将使用$ rootScope，并在其上定义foo：

<div my-directive ng-click="foo()" >click me</div>
<div ng-controller="MainCtrl"></div>

fiddle

如果您的指令在控制器内使用，它将使用该控制器的范围：

<div ng-controller="MainCtrl">
   <div my-directive ng-click="foo()" >click me</div>
</div>

fiddle