程序员经验分享-hwhale

为什么 ng-click 在我的指令中不起作用以及如何添加切换类？

2023-12-15

我在 Angular 中创建了一个指令，如下所示：

angular.module('msfApp')
    .directive('listitem', function () {
        return {
            templateUrl: 'assets/templates/directives/listitem.html',
            restrict: 'E',
            scope: {
                'item': '='
            }
        }
    });

模板看起来像这样：

<div class="tsProductAttribute" ng-click="toggleInBasket(item)">
    <span class="tsProductAttribute-image">
        <img ng-src="{{item.variants[0].image}}">
    </span>
    <span class="tsProductAttribute-desc">{{item.productName}}</span>
    <span class="tsProductAttribute-price">{{item.variants[0].price[0].amount}} {{item.variants[0].price[0].entity}}</span>
</div>

但现在我有两个问题：

  1. ng-click 功能不会在我的控制器中触发，toggleInBasket(item)， 这是为什么？
  2. 其次，如何向列表项添加切换行为，以便它切换名为“tsProductAttribute--selected”的类

预先感谢各位！


1）问题是孤立的范围。您无法在控制器作用域中看到该函数。一种解决方案是将函数引用传递给指令：

http://plnkr.co/edit/GorcZZppa8qcIKbQAg2v?p=preview

<body ng-controller="ItemController">
  <listitem item="item" item-click="toggleInBasket(item)"></listitem>
</body>

在指令中：

scope: {
    'item': '=',
    'itemClick': '&'
}

并在模板中：

<div class="tsProductAttribute" ng-click="itemClick(item)">

2) 在指令中创建另一个函数来切换选定状态并调用控制器函数：

angular.module('msfApp').directive('listitem', function () {
  return {
    templateUrl: 'listitem.html',
    restrict: 'E',
    scope: {
      'item': '=',
      'itemClick': '&'
    },
    link: function(scope, iElement, iAttrs) {
      scope.selected = false;
      scope.toggleState = function(item) {
        scope.selected = !scope.selected;
        scope.itemClick(item);
      }
    }
  }
});

并在模板中切换类：

<div class="tsProductAttribute" 
    ng-class="{'tsProductAttribute--selected': selected}" 
    ng-click="toggleState(item)">
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

angularJS

为什么 ng-click 在我的指令中不起作用以及如何添加切换类？ 的相关文章

随机推荐

  • 如何使 macOS 应用程序窗口在关闭并使用菜单栏项重新打开时隐藏？

    我正在开发一个 macOS 应用程序 使用 Swift 和 Storyboard 其窗口的行为类似于 Adob e Creative Cloud 应用程序 经过几个小时的研究 我找不到最佳解决方案 这意味着 当应用程序启动时 主窗口会在状态

  • Java 内存模型是否保证线程内写入的可见性？

    考虑一个简单的单线程 Java 程序执行 不涉及同步操作 仅涉及实例变量的普通读取和写入 一个简单的实现忽略所有写入似乎符合 Java 内存规范 首先 适用的一般性声明 17 4 内存模型决定了程序中每个点可以读取哪些值 每个隔离线程的操作

  • MongoDB 中的全文搜索未产生“@@@”的预期结果

    所以我在一个集合中有一个文档 其中一个字段的值为 我对集合建立了索引并尝试运行查询 db getCollection TestCollection find text search 但没有显示结果 我该如何解决这个问题 样本文件 id Ob

  • Linux使用堆栈上的字符串编写系统调用[重复]

    这个问题在这里已经有答案了 我刚刚开始在 linux 上自学 x86 汇编these视频教程 早期它教您如何使用 write 系统调用来打印存储在数据部分中的字符串 是否可以使用 write 系统调用来打印存储在堆栈上的字符串 这是我编写的

  • AWS EMR Spark：写入 S3 时出错 - IllegalArgumentException - 无法从空字符串创建路径

    我已经尝试解决这个问题很长时间了 不知道为什么我会得到这个 仅供参考 我正在 AWS EMR 集群上的集群上运行 Spark 我调试并清楚地看到提供的目标路径 类似s3 my bucket name Spark 作业创建 orc 文件并在创

  • Android合并两张图片

    我想合并两张图像 然后将它们保存在 Android SDCard 上 一张来自相机 一张来自资源文件夹 问题是我收到此错误 Caused by java lang IllegalStateException 不可变位图传递给 Canvas

  • 如何将具有奇数列和行的输入矩阵中的中心 k × k 矩阵归零

    我正在尝试解决这个问题 编写一个名为 cancel middle 的函数 该函数接受 A 一个 n m 矩阵 作为输入 其中 n 和 m 均为奇数 k 为正数 小于 m 和 n 的奇整数 该函数不必 检查输入 该函数返回输入矩阵 其中心为

  • EF Code First Fluent API - 所有列的首字母小写

    我希望建立一个 EF Code First 约定 其中属性的所有列名称的首字母都是小写的 但是 我还有其他流畅的 API 代码可以更改默认列名称 我似乎无法找到一种方法来访问current属性的列名称 以便将第一个字母小写 从 Proper

  • sigaction 将 SIGINT 传递给系统调用，但不传递信号

    我有一个循环处理accept 2 称呼 我希望能够在以下情况下执行一些清理工作 SIGINT被发送到程序 我的第一个想法是使用signal功能 void signal handler int signal printf Caught sig

  • 为什么在执行批处理文件时，丹麦语字符不显示在文本编辑器中？

    我制作了一个简单的批处理文件 但是 Windows 命令处理器cmd exe当我执行批处理文件时 无法正确显示丹麦语字符 它显示了奇怪的字符 例如 反而 如果我输入echo 直接在cmd窗口中显示 我的电脑有问题吗 Use chcp管理您的

  • 通过拖动选择表格上的单元格

    我在看这个问题并看到了对 iPhone 游戏的参考 在该游戏中 你可以在屏幕上拖动并选择字母 我很好奇在 Javascript 中使用表格来实现这一点 因此 您可以将鼠标拖动到每个单元格上 然后它们就会突出显示 我不确定最好的方法是什么 但

  • ASP.NET Core rc2 中的 Cookie

    有人可以解释一下如何在 ASP NET Core rc2 应用程序中存储和获取 cookie 吗 我只能找到有关旧版本的过时信息HttpContext Response Cookies Get and Add方法 这两种方法在 Core 中

  • Webpack - 构建没有依赖项的包

    我想知道是否可以使用一些 javascript 文件构建一个捆绑包 但没有依赖项 我想要带有 React 组件的小捆绑包 在我的例子中 每个 React 组件都是由几个 React 组件构建的 例如评论组件包括评论框 列表和表单 我可以通过

  • 在 WPF 中的两个窗口之间共享同一对象

    我有代表我的班级AppSettings I have Main窗户和Settings window 每个窗口都包含对象的实例AppSettings 所以这是两个不同的对象 如果反对AppSettings in Settings窗口发生更改

  • 默认 .equals 和 .hashCode 如何适用于我的类？

    说我有自己的班级 public class MyObj 它有一些属性和方法 它没有实现 equals 也没有实现 hashCode 一旦我们调用 equals 和 hashCode 默认实现是什么 来自对象类 它们是什么 默认等于如何工作

  • false/true 对于 IPreInsertEventListener 到底意味着什么？

    我最近发现了如何使用IPreDeleteEventListener IPreInsertEventListener and IPreUpdateEventListener in the NHibernate Event命名空间 然而 我仍然

  • 是否可以通过 JMX 使 JBoss 中的单个会话失效？

    我们正在追踪应用程序中的一些内存问题 并且我们可以了解问题所在的会话的大小 它只会影响某些会话 它们似乎会失去控制 我们希望能够或多或少地 手动 使这些会话无效 以回收该内存 有没有办法通过 JMX 来做到这一点 我们使用的是 JBoss

  • psycopg2：用一个查询插入多行

    我需要用一个查询插入多行 行数不是恒定的 所以我需要执行如下查询 INSERT INTO t a b VALUES 1 2 3 4 5 6 我知道的唯一方法是 args 1 2 3 4 5 6 args str join cursor mo

  • 在 Kivy for Python 中按下按钮时更新标签的文本

    这是我的代码 我想制作一个游戏 当您按下按钮时 main label 会更改文本 但我已经到处找了一个星期 但仍然不明白如何做到这一点 我看了Kivy的网站 但我不明白 正如你所看到的 我是 kivy 的新手 经验也不是很多 from ki

  • 为什么 ng-click 在我的指令中不起作用以及如何添加切换类？

    我在 Angular 中创建了一个指令 如下所示 angular module msfApp directive listitem function return templateUrl assets templates directive

热门标签