从嵌入元素访问指令的控制器

Question

我有以下场景：具有隔离范围的 transclude 指令，其中附加了一个控制器：

angular.module('app', [])
.directive('hello', function() {

   return {  

     controller: function($scope) {
       $scope.hello = "Hello World";
     },

     restrict: 'E',
     replace: true,
     transclude: true,
     template: '<div class="hello" ng-transclude></div>',
     scope: {}
   };

});

我期待从被嵌入的元素中访问指令的控制器：

<hello>
  <h1>Hello Directive</h1>

  <p>{{ hello }}</p>
</hello>

然而这似乎是不可能的。我尝试使用$parent 和$$nextSibling 访问hello。

这种情况有什么解决方案吗？我无法将控制器放在指令实例周围的包装器中。

我创建了一个代码笔来演示这种行为：http://codepen.io/jviotti/pen/ktpbE?editors=101

Answer 1

您需要将变量作为绑定传递到 hello 指令中，并将其作为隔离范围的一部分：http://codepen.io/anon/pen/yoCkp

更多信息在这里：Confused about Angularjs transcluded and isolate scopes & bindings

编辑：

在最初的例子中，模板期望 {{ hello }} 变量在父根范围内，但它实际上在 hello 指令范围内。实际上，指令中的空隔离范围意味着它不会从其父级获取任何范围变量。所以上面的变化所做的就是将（不存在的）hello变量从根范围路由到指令中，然后设置值。

为了进一步说明这一点，您可以查看以下内容：http://codepen.io/anon/pen/pJEqjq - 您将看到控制器正在设置 $rootScope.hello 并且它也可以正常工作。虽然不建议这样做，因为在不同控制器之间依赖 rootScope 变量可能会变得混乱。