来自transcluded元素的Access指令控制器

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: {}
   };

});

我期待从transcluded元素访问指令的控制器:

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

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

然而,这似乎不可能.我尝试hello用$parent和访问$$nextSibling.

这个场景有什么解决方案吗？我无法将控制器放在指令实例的包装器中.

我创建了一个codepen来演示这种行为:http://codepen.io/jviotti/pen/ktpbE？edit = 101

Answer 1

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

更多信息在这里：对 Angularjs 嵌入和隔离范围和绑定感到困惑

编辑：

在原始示例中，模板期望 {{ hello }} 变量位于父根范围内，但它实际上位于 hello 指令范围内。事实上，指令中的空隔离作用域意味着它不会从其父级获取任何作用域变量。因此，上述更改的作用是将（不存在的）hello 变量从根范围路由到指令中，然后设置值。

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