草庐IT

javascript - 将数据传递给嵌入的元素

coder 2024-07-28 原文

我想创建一个指令来组织按日期分组的显示数据。我还希望能够指定一个指令来显示各个行。在一个完美的世界中，它看起来像这样(但又漂亮又漂亮)

Friday, Oct 28
    [some directive html]
    [some directive html]
    [some directive html]
Saturday, Oct 29
    [some directive html]
Sunday, Oct 30
    [some directive html]
    [some directive html]
...

这显然行不通，所以如果您有更好的方法请告诉我，但我希望能够按照这些思路做一些事情:

app.directive('dateOrganized', [function(){
    return {
        template:
            '<div>' +
                '<div ng-repeat="organizedDate in organizedDate">' +
                    '<div>{{organizedDate.date | date}}</div>' +
                    '<div ng-repeat="item in organizedDate.items">' +
                        '{{rowDirectiveHtml}}' +
                    '</div>' +
                '</div>' +
            '</div>',
        scope: {
            organizedDates: '=',
            rowDirectiveHtml: '='
        }
        ...
    };
}])

app.directive('itemRow', [function(){
    return {
        template: '<div>{{item.data}}</div>',
        scope: {
            item: '='
        }
    };
}]);

然后像这样使用它:

<div data-organized organized-dates="stuff" row-directive-html="<div item-row item=\"item\" />" />

我知道这非常丑陋(而且行不通，但我确信我可以通过一些调整让它工作)所以我真正想问的是，有没有更好的方法来做到这一点？

最佳答案

这个问题比看起来要复杂得多，所以让我们分解一下。

您正在构建的是一个接受部分模板的指令 - <div item-row item="item" /> - 和 该模板使用(或链接到范围)一个内部变量 - item - 用户未在外部范围内定义；它的含义由您的指令定义，您的用户通过阅读您的指令文档来“发现”它。我通常使用前缀 $ 来命名此类“魔法”变量，例如$item .

第一步

不是通过属性绑定(bind)将模板作为 HTML-as-string 传递，而是将其作为内容传递并嵌入该内容。嵌入允许您将嵌入的内容绑定(bind)到任意范围:

<foo>
  <div>my item is: {{$item}}</div>
</foo>

.directive("foo", function(){
  return {
    scope: {},
    transclude: true,
    template: "<h1>I am foo</h1><placeholder></placeholder>",
    link: function(scope, element, attrs, ctrls, transclude){

      scope.$item = "magic variable";

      transclude(scope, function(clonedContent){
        element.find("placeholder").replaceWith(clonedContent);
      });
    }
  };
});

上面会放置模板<div>my item is: {{$item}}</div> (可以是您指定的任何模板)其中指令 foo决定，并将链接到具有 $item 的范围定义。

第 2 步

但是你的指令的复杂性在于它使用了 ng-repeat ，它本身接受一个模板，并且您的指令接收的模板需要用作 ng-repeat 的模板。 .

只用上面的方法，这是行不通的，因为到时候 link运行，ng-repeat在您有机会应用您的内容之前，将已经嵌入了它自己的内容。

解决该问题的一种方法是手动 $compile foo的模板而不是使用 template属性(property)。在编译之前，我们将有机会在需要的地方放置预期的模板:

.directive("foo", function($compile){
  return {
    scope: {},
    transclude: true,
    link: function(scope, element, attrs, ctrls, transclude){

      scope.items = [1, 2, 3, 4];

      var template = '<h1>I am foo</h1>\
                      <div ng-repeat="$item in items">\
                        <placeholder></placeholder>\
                      </div>';
      var templateEl = angular.element(template);

      transclude(scope, function(clonedContent){
        templateEl.find("placeholder").replaceWith(clonedContent);

        $compile(templateEl)(scope, function(clonedTemplate){
          element.append(clonedTemplate);
        });
      });
    }
  };
});

Demo

关于javascript - 将数据传递给嵌入的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32303493/

据传递给codeitemdirectivejavascriptangularjs

有关javascript - 将数据传递给嵌入的元素的更多相关文章

  1. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  2. ruby - Ruby 有 `Pair` 数据类型吗？ - 2

    有时我需要处理键/值数据。我不喜欢使用数组，因为它们在大小上没有限制(很容易不小心添加超过2个项目，而且您最终需要稍后验证大小)。此外，0和1的索引变成了魔数(MagicNumber)，并且在传达含义方面做得很差(“当我说0时，我的意思是head...”)。散列也不合适，因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题，但我很想知道:Ruby标准库是否已经带有这样一个类？ 最佳

  3. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  4. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  5. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  6. FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2

    本教程将在Unity3D中混合Optitrack与数据手套的数据流，在人体运动的基础上，添加双手手指部分的运动。双手手背的角度仍由Optitrack提供，数据手套提供双手手指的角度。 01  客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照：https://gitee.com/foheart_1/foheart-h1-data-summary.git02  数据转发打开MotiveBody软件的Streaming，开始向Unity3D广播数据；MotionVenus中设置->选项选择Unit

  7. 使用canal同步MySQL数据到ES - 2

    文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目，Java开发。基于数据库增量日志解析，提供增量数据订阅&消费。Git地址：https://github.co

  8. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  9. ruby-on-rails - 创建 ruby​​ 数据库时惰性符号绑定(bind)失败 - 2

    我正在尝试在Rails上安装ruby​​，到目前为止一切都已安装，但是当我尝试使用rakedb:create创建数据库时，我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf

  10. STM32读取串口传感器数据（颗粒物传感器，主动上传） - 2

    文章目录1.开发板选择*用到的资源2.串口通信（个人理解）3.代码分析（注释比较详细）1.主函数2.串口1配置3.串口2配置以及中断函数4.注意问题5.源码链接1.开发板选择我用的是STM32F103RCT6的板子，不过代码大概在F103系列的板子上都可以运行，我试过在野火103的霸道板上也可以，主要看一下串口对应的引脚一不一样就行了，不一样的就更改一下。*用到的资源keil5软件这里用到了两个串口资源，采集数据一个，串口通信一个，板子对应引脚如下：串口1，TX：PA9，RX：PA10串口2，TX：PA2，RX：PA32.串口通信（个人理解）我就从串口采集传感器数据这个过程说一下我自己的理解，

随机推荐