AngularJs 将 HTML 中每个 ng-repeat 的实例传递给指令

2024-02-07

我认为这应该很简单,但我错过了一些东西。我怎样才能通过flowObj in my ng-repeat下面是我的指令?我想将它传递给我的指令,然后单击,使用它FlowObj,然后应用一些逻辑。我尝试在我的指令中使用注释代码

scope: { 
    test:"@" 
}

但它似乎搞砸了我的CSS。

HTML:

<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   </head>
   <body>
      <div id="center_outer">
         <div id="center_inner" ng-controller="CtrlPageFlow">
            <div flowclick class="cflow" ng-repeat="flowObj in flows">
               {{flowObj.name}}
            </div>
         </div>
      </div>
   </body>
</html>

这是我的指令

angular.module('directives', ['opsimut']).directive('flowclick', function() {
    return {   
        /* 
        scope: {
            test:"@"   // set the attribute name on the directive's scope
        },
        */
        link: function(scope, elem, attr) {
            elem.bind('click', function(scope) {
                debugger;
                alert(scope.flowObj);
                //scope.name += '!';
                //scope.$apply();
            });
        }
    };
});

基于答案的解决方案:

angular.module('directives', ['opsimut']).
directive('flowclick', function() {
  return {
    link: function(e, elem, attr) {
      // scope is the directive's scope,
      // elem is a jquery lite (or jquery full) object for the directive root element.
      // attr is a dictionary of attributes on the directive element.
      elem.bind('click', function(e1) {
        debugger;
        alert(e.flowObj);
      }, e);
    }
  };
});

解决方案:全部拆掉scope财产来自您的指令,一切都应该按预期进行。

ALSO:您需要重命名scope这一行的论点:

elem.bind('click', function(scope) {

像这样的东西:

elem.bind('click', function(e) {

因为您正在覆盖对scope在您的事件处理程序中使用相同的名称。

解释:

The ng-repeat指令导致它的每个克隆都有自己的新作用域。由于元素上的指令默认共享作用域,因此与元素一起放置的任何其他指令ng-repeat共享其范围并可以访问当前迭代的$scope变量。换句话说,您的自定义指令已经与以下共享范围ng-repeat并有权访问flowObj默认情况下。

指定 a 时不起作用的原因scope您的自定义指令的属性是,这导致该指令具有自己的隔离范围,该范围不与ng-repeat因此您无权访问克隆范围内的变量。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJs 将 HTML 中每个 ng-repeat 的实例传递给指令 的相关文章

  • 如何将毫秒转换为可读的日期?

    下列 new Date 1324339200000 toUTCString Outputs Tue 20 Dec 2011 00 00 00 GMT 我需要它返回Dec 20 除了我可以使用的更好的方法之外toUTCString 我正在寻找
  • 在 JSON 数组中按属性查找对象

    我在获取 JSON 数据中的字符串时遇到问题 格式如下 name Alice age 20 id David last 25 id John last 30 有时它会一起改变位置 John从第三名到第二名 name Alice age 20
  • 在多个 angular.js 应用程序之间共享单个服务

    我正在构建一个电子商务网站 基于 shopify 并且使用多个小型 angularjs 应用程序来处理诸如快速购物车 愿望清单 过滤产品和其他一些较小项目之类的事情 我最初使用了一个大型应用程序 具有路由和所有内容 但当我没有完整的 RES
  • 如何从矩形点计算旋转角度?

    我有4分1 2 3 4闭合一个矩形 这些点按以下方式排列在数组中 x1 y1 x2 y2 x3 y3 x4 y4 我遇到的问题是矩形可以旋转一定角度 如何计算原始点 灰色轮廓 和角度 我试图在 javascript css3 transfo
  • 使用 ngx-translate 时更改 URL

    当有人使用 ngx translate 单击所选语言时 我尝试更改 URL 我想我应该通过订阅语言更改事件然后修改当前的 url 以反映所选的语言来做到这一点 因为我是新手 所以我不确定是否需要服务来做到这一点 或者可能是另一种解决方法 我
  • 如何在 Vue.js 2 中使用事件总线通过自定义事件传递数据

    我在用着Vue js 2 5 x 在我的玩具项目中 我实现了一个事件总线 类似于所示的here https alligator io vuejs global event bus 事件总线在 Vue 原型中全局注册为 eventBus 然后
  • 将 DIV 堆叠在一起?

    是否可以堆叠多个 DIV 例如 div div div div div div div div div div 那么所有这些内部 DIV 都具有相同的 X 和 Y 位置吗 默认情况下 它们都在彼此下方 将 Y 位置增加了上一个 DIV 的高
  • :目标选择器不适用于选项标签

    我试图在这里帮助一位 StackOverflow 成员 我发现 CSS target选择器不适用于选项标签 我创建了一个示例来说明使用w3schools 教程 http www w3schools com cssref tryit asp
  • 如何在没有查询参数的情况下重新加载页面?

    假设我想重新加载www domain com abc num 4 但我想重新加载www domain com abcONLY 问号后没有所有内容 window location window location href split 0
  • jQuery.ajax() 记录 HTTP 请求

    我有一个发送 HTTP POST 请求的函数 我想记录它以进行调试 这是函数 function serverRequest URL DATA callback ajax url URL type POST dataType text con
  • 同源政策目的可疑

    正如我所读到的 同源策略是防止源自 邪恶 域 A 的脚本向 良好 域 B 发出请求 换句话说 跨站点请求伪造 玩了一下我了解到的Access Control Allow Origin标头和CORS据我了解 它允许从好域 B 指定服务器 域
  • 无法使用键盘导航特定高度的 Angular-ui Bootstrap Typeahead

    所以 我认为这更像是一个引导程序问题 而不是 Angular ui 但我在这个问题上花了 2 个晚上 但我找不到隧道尽头的光明 这是笨蛋 http plnkr co edit n39LVjbHQzmcwGkk2dR1 p preview h
  • 恢复默认的CSS属性

    我正在编写一个可在多个网站上使用的组件 每个网站都有自己的样式表 并且以不同的方式显示某些内容 我的所有 html 都包含在一个带有 id 的 div 中 div div 然而 我的组件是在所有网站上看起来一致 这很好 因为我将样式应用于组
  • 通过排列四个给定数字找到最大可能时间 HH:MM

    我最近为了工作晋升而参加了编码测试 这是我真正遇到的任务之一 我想知道什么是最好的方法来做到这一点 我使用了大量的 if 和 if else 这不是最干净的解决方案 但完成了工作 我被问到的问题是 将 4 个数字格式化为 24 小时时间 0
  • 插入四个空格而不是制表符

    我试图在按下 Tab 键时插入四个空格 我正在使用以下代码 请参阅spaces t 但是当我将其切换到spaces 当我按 Tab 时只插入一个空格 我还尝试了 function textarea keydown function e va
  • 在 Javascript 中使用 fetch API 接收和处理 JSON

    在我的项目中 当条件不足时 我的 Django 应用程序会发送带有消息的 JSON 响应 我使用这个 JsonResponse 指令 Code data is taken email email return JsonResponse da
  • 使用 AngularJS 动态加载 Google 地图 API

    我正在尝试使用 AngularJS 加载 Google Maps API 以及该部分的控制器 search controller GoogleMaps scope sce function GoogleMaps scope sce var
  • 如何找出javascript中加载了哪些javascript?

    继另一个问题的评论之后 我问自己是否有办法获取页面上加载的所有 js 代码的列表 就像 Firebug 或 chrome Inspector 所做的那样 有没有一种纯javascript的方法 一种方法是抓取脚本标签 但这样你可能会错过动态
  • 来自 ajax 的 Bootstrap 表 json

    我有 ajax 和 bootstrap 表的问题 我有一个 ajax JSON 我用这个方法调用 document ready function ajax url php process php method fetchdata dataT
  • 为什么转换 new.Date() .toISOString() 会改变时间?

    我正在以两种不同的格式在数据库中插入日期 这是作为日期时间插入 var mydate mydate new Date document getElementById clockinhour value mydate toISOString

随机推荐

  • JSF h:inputText 验证和 f:ajax 渲染

    一个非常简单的 JSF 应用程序 InputText 元素分配有 Validator f ajax 用于渲染下一个元素 phoneNumber 方法是使用blur event 仅当 inputText 通过验证器且 isValid 布尔值设
  • 如何使用 Visual Studio x64 进行编译?

    我想从bat 文件在VS2008 x64 中编译 当我在 VS2008 32 位中编译时 我调用 vsvars32 bat 我需要调用什么才能在 x64 中进行编译 现在建议不要使用vsvar32 bat并使用SetEnv cmd而是设置您
  • 发现长模式

    给定一个排序的数字列表 我想找到最长的子序列 其中连续元素之间的差异呈几何级数增加 所以如果列表是 1 2 3 4 7 15 27 30 31 81 那么子序列是1 3 7 15 31 或者考虑1 2 5 6 11 15 23 41 47其
  • 检查 Javascript 数组值是否按升序排列

    假设我有一个 Javascript 整数数组 我想检查它的所有值是否都按升序排列 我想要的是将数组键保存在另一个数组中 以防算法发现一个较低 或等于 的值 不仅比较前一个值 而且还比较它之前的任何值 我所做的是这样的 arr nonvali
  • 匹配大文本文件中的字符串?

    我有一个字符串列表 其中包含大约 700 万个项目 大小为 152MB 的文本文件 我想知道实现 a 函数的最佳方法是什么 该函数接受单个字符串并返回它是否在该字符串列表中 您是否需要多次匹配此文本文件 如果是这样 我会创建一个HashSe
  • 日期格式 dd\mm\yyyy 的正则表达式是什么?

    日期格式 dd mm yyyy 的正则表达式是什么 我无法找到这种格式的正则表达式 模式 dd mm yyyy 的正则表达式 String regex 0 2 0 9 3 0 1 0 0 9 1 0 2 0 9 0 9 0 9 0 9
  • 在 Objective-C 中设置文件权限

    我设法得到了一个漂亮的 ftp 对象 它的级别非常低并且很容易适应 我使用它通过 FTP 将文件从一台 Mac 传输到另一台 Mac 现在 我遇到的问题是 当传输的文件到达目的地 另一台 Mac 时 访问权限会以随机间隔设置为 所有人 无访
  • 不可变集合上的非可变“添加”方法的最佳名称是什么? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 Locked 这个问题及其答案是locked help locked posts因为这个问题是题外话 但却具有历史意义 目前不接受新的答案或互动
  • “‘字段列表’中的未知列”,但列确实存在

    DROP TABLE IF EXISTS transactions CREATE TABLE transactions id int 11 unsigned NOT NULL AUTO INCREMENT purchase date dat
  • 使用 php 获取下一个 15 日和/或 30 日的日期?

    我需要获取即将到来的日期15th and 30ths未来几个月的日期 如果二月在范围内 当然必须是 28 29 我可以使用 mktime strtotime 或者使用其他方法来执行此操作吗 我得到了这个 但当然这只是为了得到这个月和下个月的
  • 允许保存比较标记的差异工具

    是否有一个 diff 工具可以保存比较标记 为了澄清这一点 我想保存两个文件的实际比较 以显示差异 然后发送给某人进行审查 EDIT 这里有很多好的答案 就我而言 我已经有一份副本无可比拟 http scootersoftware com但
  • Promise.then 作业执行顺序

    规范说 https www ecma international org ecma 262 7 0 index html sec jobs and job queues 第 5 段 来自单个作业队列的 PendingJob 记录始终在 先进
  • html 脚本 src="" 用按钮触发重定向

    我有以下用于登录的 login html 页面位于设计文件夹中 h3 Login h3
  • std::copy 和 std::vector 问题

    我明白为什么这会导致段错误 include
  • 保护 Linux Web 服务器的公共访问

    我想设置一个便宜的 Linux 机器作为 Web 服务器来托管各种 Web 技术 我想到了 PHP 和 Java EE 但我将来也想尝试使用 Ruby 或 Python 我相当精通设置 Tomcat 在 Linux 上运行以提供 Java
  • UILineBreakMode 与 NSLineBreakMode

    我看到一些 UIStringDrawing 方法已更新为使用 NSLineBreakMode 而不是 iOS 6 0 中的 UILineBreakMode E g CGSize sizeWithFont UIFont font constr
  • 原型继承最佳实践?

    我刚刚接触 JavaScript 并试图了解原型继承 似乎有多种方法可以达到相同的效果 所以我想看看是否有任何最佳实践或理由以一种方式做事而不是另一种方式 这就是我要说的 Method 1 function Rabbit this name
  • 2页出现死锁

    我正在解决在生产环境中看到的一些死锁 我对此很陌生 但有些事情对我来说似乎很奇怪 所以我有下面的死锁图 死锁的右侧是更新 如下所示 UPDATE order sub line SET sub line status 300 WHERE or
  • 从 C# 调用方中的非托管 DLL 捕获标准输出

    我有一个 C 应用程序通过一些 C CLI 编组代码调用本机 C DLL C gt C CLI gt C 无 CLR 我希望 DLL 在运行时将字符串更新发送回调用应用程序 目前 非托管 DLL 将输出写入 stdout 本质上我需要在 U
  • AngularJs 将 HTML 中每个 ng-repeat 的实例传递给指令

    我认为这应该很简单 但我错过了一些东西 我怎样才能通过flowObj in my ng repeat下面是我的指令 我想将它传递给我的指令 然后单击 使用它FlowObj 然后应用一些逻辑 我尝试在我的指令中使用注释代码 scope tes