ng-click 在动态创建的内容中不起作用

2024-03-25

我在 Angular 中有这个功能,我在其中添加了一个带有 ng-click 的新幻灯片。

var addSlide = function($scope, slideIndex, $event) {
  slideIndex++;
  var slider = angular.element('.slick-slider');
  var currentSlide = slider.slick('slickCurrentSlide');
  slider.slick('slickAdd', '<div class="slide" ng-click="addPhoto(); $event.stopPropagation();"><input type="file" class="camera-trigger" accept="image/*"><img class="photo-img" src="" /></div>');
};

不幸的是,动态创建的 ng-click 事件不起作用(ng-click 无法从动态生成的 HTML 中工作 https://stackoverflow.com/questions/19267979/ng-click-not-working-from-dynamically-generated-html),在我的情况下如何解决这个问题,因为它是控制器内的函数,而不是指令?


您需要在此处添加 $compile 服务,它将像 ng-click 这样的角度指令绑定到您的控制器范围。类似于:

var divTemplate = '..your div template';
var temp = $compile(divTemplate)($scope); 

然后将其附加到 HTML 中:

angular.element(document.getElementById('foo')).append(temp);

您还可以将事件绑定到 div,如下所示:

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

ng-click 在动态创建的内容中不起作用 的相关文章

  • Angular JS 更改后更新输入字段

    我正在尝试在 Angular 中构建一个简单的计算器 如果我愿意的话 我可以在其中覆盖总数 我有这部分工作 但是当我返回在字段一或字段二中输入数字时 字段中的总数不会更新 这是我的jsfiddlehttp jsfiddle net YUza
  • 在 HTML SELECT 标记中禁用键盘

    我想禁用 HTML SELECT 标记的键盘 以便用户只能使用鼠标来选择选项 我试过了event cancelBubble true on the onkeydown onkeyup and onkeypress没有运气的事件 有任何想法吗
  • 这个特定的 ReactJs 代码是如何执行的初学者问题?

    我是初学者 正在阅读大量代码 现在我想知道下面的代码我明白这段代码在做什么 我需要澄清的是代码流程 当我运行它时 我看到图像正在加载 React 是从上到下执行代码吗 占位符图像异步获得正确的图像 但会App如果需要时间 组件会开始渲染但没
  • Jquery 动画与 CSS 浮动

    我的代码有问题 宽度似乎可以工作 但浮动没有 这里是 这是一个例子 http jsfiddle net v82ck http jsfiddle net v82ck 问题 悬停时菜单上的浮动属性不会改变 我希望每个菜单元素下方的线在悬停该菜单
  • 在 AngularJS 中覆盖运行时的依赖关系

    我有一个服务叫 doggedHttp 它公开了与 http 现在我想创建一个 doggedResource服务是有角度的 resource服务之上 doggedHttp代替 http 换句话说我想注入 doggedHttp as the h
  • GeoJSON 要素坐标未显示在 OpenLayers 地图上

    我正在尝试显示一个GeoJSON地图上的多边形 我使用了 OpenLayers 提供的示例以及以下数据 但仅显示第二个多边形 var geojsonObject type FeatureCollection crs type name fe
  • 按自定义字母顺序对数组进行排序

    如何对这样的数组进行排序 apple very auto tom tim violet 要按 v a t x b 等排序 不按字母顺序 violet very auto tom tim 在脚本中 我会做这样的事情 myArray sort
  • 在 NPM 上捆绑并发布客户端 Web 代码

    我制作了一个 JavaScript 文件 假设它的内容是这样的 let myCoolAlert str gt alert str in a different js file SO doesn t allow you to cross fi
  • 在 Chrome 中检索浏览器语言

    我一直在尝试让 momentjs 正确检测浏览器语言并本地化时间显示 按照使用 Moment js 进行区域设置检测 https stackoverflow com questions 25725882 locale detection w
  • 获取键盘事件中的鼠标位置

    我试图在用户按住 Shift 键时出现选择轮 滚轮应以鼠标位置为中心 然而当我测试这个时 pageX and clientX两者在事件对象上都未定义 是否可以通过键盘事件获取鼠标坐标 不 只需跟踪mousemove事件并持续保存当前位置 以
  • 当脚本是从加载的脚本动态创建的 DOM 节点时,脚本 onload 和 window.onload 的顺序是否定义良好?

    File loader js function main if typeof window undefined var script window document createElement script script src https
  • HTML if 语句在 CDN 失败时加载本地 JS/CSS

    当从 CDN 或任何外部服务器加载 CSS JS 文件时 有可能 即使概率很低 由于外部故障而丢失该文件 在这种情况下 html 页面将因缺乏适当的 CSS 和 JS 而被损坏 有没有一种实用的方法可以在 CDN 故障时加载本地版本 IF
  • 单击窗口后才检测到 keydown

    在我的 Web 应用程序中 我有一个用于打开菜单的键的事件侦听器 仅当我单击页面上的任意位置后 此功能才可以正常工作 我尝试将焦点添加到窗口加载 但这仍然不会让 keydown 函数运行 直到我单击页面上的某个位置之后 有谁知道这是否可能
  • CKEditor TypeError:c[a] 在 CodeIgniter 中未定义

    我正在尝试在基于 codeigniter 的网站中安装 CKEditor 并且我已按照本教程进行操作 Codeigniter 教程中的 CKEditor http nukium com developpement php framework
  • 条件顺序仅在 init AngularJS 上执行

    如何在视图初始化时仅运行 orderBy 过滤器一次 我不希望我的列表在运行时被重新排序 li li 使用 orderBy 作为控制器中的过滤器 app controller DemoCtrl scope filter function s
  • Safari 的 Javascript 与 document.write 的问题

    我的问题只发生在 Safari 上 IE FF Chrome 和 Opera 都可以完美运行 我正在向 DOM 添加一个对象 与 YouTube 的方式完全相同 具体取决于 ActiveX 或 NPAPI 因此在确定写入对象类型后 我通过以
  • JS中如何过滤多个字符串? [复制]

    这个问题在这里已经有答案了 我希望能够过滤数组中的多个字符串 类型 例如我想过滤类型meat并输入fruit在下面的数据结构中 我想要实现的是过滤数据对象 const data type meat food hamburger type f
  • 禁用 Materialise Carousel 上的触摸

    看起来以前没有人问过这个问题 因为我几乎在互联网上寻找一个非常简单的答案 如何禁用在物化轮播上向左 向右滑动的功能 在 Materialize js 添加 编辑 var allowCarouselDrag true value functi
  • 使用 Promise 语法编写同步代码有什么好处吗?

    有同步承诺这样的概念吗 使用 Promise 语法编写同步代码有什么好处吗 try foo bar a b bam catch e handleError e 可以写成类似的东西 但使用同步版本then foo then bar bind
  • Javascript:修改原型不会影响现有实例[重复]

    这个问题在这里已经有答案了 我创建了原型的 2 个实例 更改了原型中的函数 更改反映在两个实例中 很棒 但是 当我通过删除该函数来修改原型时 该函数对于现有实例仍然存在 function A this name cool A prototy

随机推荐