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

发布时间：2020-12-17 08:51:33 所属栏目：安全来源：网络整理

导读：我有以下场景：具有隔离范围的transclude指令,其中包含一个控制器： angular.module('app',[]).directive('hello',function() { return { controller: function($scope) { $scope.hello = "Hello World"; },restrict: 'E',replace: true,transclude: true,te

我有以下场景：具有隔离范围的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>

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

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

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

您需要将变量作为绑定传递给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变量会变得混乱.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!