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>

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

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

我创建了一个codepen来演示这种行为：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变量会变得混乱。

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

1 个答案: