个人中心
gpt4 book ai didi

angularjs - 访问标记中 ng-transclude 标签的范围

转载 作者：行者123 更新时间：2023-12-03 17:42:24 26 4
gpt4 key购买 nike

我想在第一次将被嵌入元素插入到具有隔离作用域的指令中的标记中时访问它的作用域。我可以使用 transclude 函数访问被嵌入元素的克隆，但不是第一次插入元素。

我有以下 HTML

<my-directive the-name="'John Doe'">
   <my-div name="myDivName"></my-div>
</my-directive>

我有两个指令。我想嵌入 my-directive 的内容，并能够从为嵌入元素创建的范围访问名为“myDivName”的变量。该变量从“my-directive”指令的隔离范围内的变量“theName”中获取其内容。

这是我的 Javascript 代码: 
var app = angular.module('test', []);
    app.directive('myDirective', function(){
      return {
        restrict: 'E',
        template: '',
        transclude: true,
        scope:{
          theName: '='
        },
        template: '<div>Hello I am My Directive and this content goes BEFORE the transclude<br><ng-transclude></ng-transclude><p>This element goes after the transclude</p></div>',
        link: function(scope, element, attrs, ctrl, transclude){
          transclude(function (clone, transcludeScope) {
          transcludeScope.myDivName = scope.theName;
          element.append(clone);//This line shouldn't be here. I just put it to illustrate that this clone has the right value in the output.
        });
        }
      }
    });
    app.directive('myDiv', function(){
      return {
        restrict: 'E',
        scope: {
          name: '='
        },
        template: '<div>{{name}}</div>'
      }
    });

正如您所看到的，我在“my-directive”指令中使用链接函数的 transclude 参数在 transcluded 范围内为变量“myDivName”设置正确的值。但是，该代码仅在 Javascript 替换“我的指令”中标记中的内容后才执行，并允许我根据需要附加为被嵌入内容的人工克隆(我可以访问它们的范围，因此没有问题)。

输出的 HTML 
<html>
<head>
</head>
<body ng-app="test" class="ng-scope">
<my-directive the-name="'John Doe'" class="ng-isolate-scope">
  <div>Hello I am My Directive and this content goes BEFORE the transclude<br>
  <ng-transclude>
    <!-- This is the very first time the transcluded element is inserted. 
    I want access to its scope just like I have access to the clone's scope in the transclude function. -->
    <my-div name="myDivName" class="ng-scope ng-isolate-scope">
      <div class="ng-binding">
      </div>
    </my-div>
  </ng-transclude>

  <p>This element goes after the transclude</p></div>
  <!-- This is a clone which scope was correctly modified to set the variable -->
  <my-div name="myDivName" class="ng-scope ng-isolate-scope">
    <div class="ng-binding">John Doe</div></my-div>
  </my-directive>    
</body>
</html>

问题是第一次在“my-directive”标签中插入的内容。我如何访问第一个嵌入克隆的范围？

有一种“简单的方法”可以做到这一点，它是像这篇文章建议的那样公开“my-directive”的隔离范围的变量 ngModel needs $parent when within Transcluded html ，但我不想用这样的变量挤满“我的指令”的父范围。

最佳答案

我建议不要在模板中使用 ngTransclude。 ngTransclude 链接到预隔离范围(嵌入范围)，您是对的 - 您无权访问它。

相反，使用 transclude 函数，并自己插入克隆:

template: '<div>Hello I am My Directive and this content goes BEFORE the transclude<br><insert-here></insert-here><p>This element goes after the transclude</p></div>',
link: function(scope, element, attrs, ctrl, transclude){
  transclude(function (clone, transcludeScope) {
  transcludeScope.myDivName = scope.theName;
  var e = element.find('insert-here');
  e.append(clone);        
});

如果你真的想要 ngTransclude

或者，如果您真的希望在模板中使用 ngTransclude，则以下操作应该有效: 
template: '<div>Hello I am My Directive and this content goes BEFORE the transclude<br><ng-transclude></ng-transclude><p>This element goes after the transclude</p></div>',
link: function(scope, element, attrs, ctrl, transclude){
  var e = element.find('ng-transclude');
  transcludeScope = e.scope();
  transcludeScope.myDivName = scope.theName;

});

这个解决方案是使用jqLit​​e查找ngTransclude，然后调用scope()方法来获取transclusion scope。

关于angularjs - 访问标记中 ng-transclude 标签的范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33280417/

26 4 0
文章推荐： jsf - 在 View 中使用复合组件两次在 JSF 中重复组件 ID
文章推荐： sqlite - 如何暂时打破 SQLite 中的列唯一性？
文章推荐： sqlite - 如何在 Entity Framework Core 中对事务进行单元测试？
文章推荐： intellij-idea - 尝试将文件移动到项目中时 Intellij IDEA 卡住
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com