javascript - 当存在各自的包含内容时替换部分指令模板

coder 2023-08-06 原文

我正在尝试执行以下操作:

如果我添加 <my-custom-directive></<my-custom-directive>

它应该扩展到

<div class="my-custom-container">
   <label class="my-custom-label">Fallback</label>
   <input class="my-custom-input"/>
</div>

这可以通过将以上设置为 template 来完成和 replace:true在 DDO 中。

如果我在 HTML 中添加以下内容:

<my-custom-directive>
   <my-custom-label class="users-custom-class"><span>Custom content</span><my-custom-label>
</<my-custom-directive>

它应该扩展到

<div class="my-custom-container">
   <label class="my-custom-label users-custom-class"><span>Custom content</span></label>
   <input class="my-custom-input"/>
</div>

这意味着如果用户想要提供自定义 <label> , <input>等，我们使用嵌入，嵌入的内容替换原始模板中的相应插槽，类似于 replace:true 的方式。指令将用它的模板替换自己。

我无法合并 replace和嵌入功能。

我目前的(something-working-state)如下:

angular.module('test', [])
  .directive('transTest', function() {
    return {
      transclude: {
        lab: '?labelTest',
        inp: '?inputTest'
      },
      replace: true,
      template: '<div class="container"><label ng-transclude="lab">Fallbacl label</label><input type="text" placeholder="fallback" ng-transclude="inp"></div>',
      link: function(scope, element, attrs, ctrl, transclude) {
        console.log(transclude())
      }
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<div ng-app="test">
  <div trans-test class="test">
    <label-test>test label</label-test>
    <input-test>test input</input-test>
  </div>
</div>

如您所见，被 chop 的内容进入包含元素的 translude，而不是替换它。我读过 source code comments , 文章并检查了 ui-bootstrap-accordion 的执行情况并用 transclude:'element' 试试我的运气, 但它在 DOM 中只留下一条评论。

嵌入、替换等是我发现的可用选项，它们提供的功能与我试图实现的功能类似。但他们似乎并没有很好地发挥在一起。如果可能的话，以 Angular 实现这种功能的正确方法是什么......？

最佳答案

看来我终于成功了。该解决方案由两部分组成:

使用类似于回退(默认)的模板为 transclude-slot 元素定义指令。

这样做的主要原因是利用 Angular 的内置功能在 replace:true 时将属性复制到模板根元素。在 DDO 中设置。我不想在链接功能中手动执行此操作。
另一个原因是它允许您添加额外的功能，例如在默认模板中不需要的嵌入
第二步不定义 ng-transclude模板中的指令，而是使用 transclude函数传递给 link用于访问各种插槽的嵌入内容，如果存在则用嵌入内容替换相应元素(使用 transclude.isSlotFilled() )

好吧，这不容易让我明白，也不容易解释。希望下面的演示比文字更好地解释它:

angular.module('test', [])
  .directive('transTest', function() {
    return {
      replace: true,
      transclude: {
        lab: '?labelTest',
        inp: '?inputTest'
      },
      template: '<div class="test-parent"><label class="fallback-label">Fallback </label><br><input type="text" class="fallback-input"></div>',
      link: function(scope, element, attrs, ctrl, transclude) {
        if (transclude.isSlotFilled('lab')) {
          var label = transclude(angular.noop, null, 'lab');
          element.find('label').replaceWith(label);
        }
        if (transclude.isSlotFilled('inp')) {
          var input = transclude(angular.noop, null, 'inp');
          element.find('input').replaceWith(input);
        }
      }
    }
  }).directive('labelTest', function($compile) {
    return {
      template: '<label class="fallback-label ng-transclude">Fallback </label>',
      replace: true,
      transclude: true
    }
  }).directive('inputTest', function($compile) {
    return {
      template: '<input type="text" class="fallback-input">',
      replace: true
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<div ng-app="test">
  <div trans-test class="test">
    <label-test class="custom-label">Custom content</label-test>
    <input-test class="custom-input" placeholder="custom"></input-test>
  </div>

  <br>
  <br>
  <div trans-test class="test">
  </div>
</div>

关于javascript - 当存在各自的包含内容时替换部分指令模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36226417/

有关javascript - 当存在各自的包含内容时替换部分指令模板的更多相关文章

ruby - 将数组的内容转换为 int - 2
我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]
ruby - 通过 erb 模板输出 ruby 数组 - 2
我正在使用puppet为ruby程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这
ruby 正则表达式 - 如何替换字符串中匹配项的第 n 个实例 - 2
在我的应用程序中，我需要能够找到所有数字子字符串，然后扫描每个子字符串，找到第一个匹配范围(例如5到15之间)的子字符串，并将该实例替换为另一个字符串“X”。我的测试字符串s="1foo100bar10gee1"我的初始模式是1个或多个数字的任何字符串，例如，re=Regexp.new(/\d+/)matches=s.scan(re)给出["1","100","10","1"]如果我想用“X”替换第N个匹配项，并且只替换第N个匹配项，我该怎么做？例如，如果我想替换第三个匹配项“10”(匹配项[2])，我不能只说s[matches[2]]="X"因为它做了两次替换“1fooX0barXg
ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby 变量的内容？ - 2
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。最佳答案您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
ruby-on-rails - 在 ruby 中使用 gsub 函数替换单词 - 2
我正在尝试用ruby中的gsub函数替换字符串中的某些单词，但有时效果很好，在某些情况下会出现此错误？这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案啊，我找到了!gsub!是一个非常奇怪的方法。首先，它替换了字符串，所以它实际上修改了
ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2
我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s
ruby-on-rails - rspec - 如何检查方法是否存在？ - 2
我的模型有defself.empty_building//stuffend我怎样才能对这个现有的进行rspec？，已经尝试过:describe"empty_building"dosubject{Building.new}it{shouldrespond_to:empty_building}endbutgetting:Failure/Error:it{shouldrespond_to:empty_building}expected#torespondto:empty_building 最佳答案你有一个类方法self.empty_bu
ruby-on-rails - Mandrill API 模板 - 2
我正在使用Mandrill的RubyAPIGem并使用以下简单的测试模板:testastic按照Heroku指南中的示例，我有以下Ruby代码:require'mandrill'm=Mandrill::API.newrendered=m.templates.render'test-template',[{:header=>'someheadertext',:main_section=>'Themaincontentblock',:footer=>'asdf'}]mail(:to=>"JaysonLane",:subject=>"TestEmail")do|format|format.h
ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2
所以这可能有点令人困惑，但请耐心等待。简而言之，我想遍历具有特定键值的所有属性，然后如果值不为空，则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP
ruby - Ruby gsub 替换中的行为不一致？ - 2
两个gsub产生不同的结果。谁能解释一下为什么？代码也可在https://gist.github.com/franklsf95/6c0f8938f28706b5644d获得.ver=9999str="\tCFBundleDevelopmentRegion\n\ten\n\tCFBundleVersion\n\t0.1.190\n\tAppID\n\t000000000000000"putsstr.gsub/(CFBundleVersion\n\t.*\.).*()/,"#{$1}#{ver}#{$2}"puts'--------'putsstr.gsub/(CFBundleVersio

javascript - 当存在各自的包含内容时替换部分指令模板

有关javascript - 当存在各自的包含内容时替换部分指令模板的更多相关文章

随机推荐