当前位置: 首页 > 面试题库 >

ng-click在动态DOM AngularJS上不起作用?

施季
2023-03-14
问题内容

我有一个像这样的控制器:

@VariantModalCtrl = ($scope) ->
  $scope.upload_variant_image = ->
    alert("test")

当我尝试使用ng-click调用upload_variant_image函数时,它仅在绑定到静态DOM时才有效(当DOM加载时),我有这样的链接:

<%= link_to "test", "" , "ng-click" => "upload_variant_image()" %>

但是此元素是在DOM加载后动态添加的,因此ng-click不起作用。

但是当我在Rails中像这样更新DOM时,它不起作用:

$(".modal-body").html($compile("<%= j render("/variants/form", :variant => @variant) %>")(scope));

问题答案:

我警告您,如果您通过Angular外部方法来操纵DOM,则可能不会完全接受Angular哲学。使用AngularJS动态添加链接就像其他任何事情一样简单,并且可能比使外部库更好地发挥作用要容易得多,而且更加惯用。这是一个基于您的问题的简单示例:

<ul>
  <li ng-repeat="item in items">
    <a ng-click="upload_variant_image()">{{item.name}}</a>
  </li>
</ul>

您需要做的就是适当地合并作用域数据,这将始终“有效”。

就是说,如果您要操作DOM,则可以使用$ compile
service
导致AngularJS绑定发生(例如,根据需要单击ng-click)。不过,请考虑上述更好的选择。:)



 类似资料:
  • 问题内容: HTML jQuery 角度脚本 在这里,AngularJS的控制器部分中调用的函数不会从ng-click事件中触发。HTML已成功添加,但是ng- click无效。告诉我解决方案以使其正常工作 问题答案: 仍然不是一个完美的解决方案!!!-只是为了说明如何进行动态编译 不要将控制器用于dom操作-必须在指令的帮助下完成

  • 问题内容: 我在Angular中具有此功能,在其中添加了一个带有ng-click的新幻灯片。 不幸的是,动态创建的ng-click事件不起作用(ng-click在动态生成的HTML中不起作),由于它是控制器内部的函数而不是指令,因此如何解决此问题? 问题答案: 您需要在此处添加$ compile服务,该服务会将ng-click之类的角度指令绑定到您的控制器作用域。 然后将其附加到HTML: 您还可

  • 问题内容: 我有指令 控制器: 在索引页面上,我有: 每当包含不同的html时,我的自定义服务都会返回 我想做的是每次在指令的内容中推送不同的值以对其进行编译并将其放入html并处理控制器中的click函数时。因为我是AngularJS的新手,所以一段时间以来一直在努力解决这个问题。请帮忙。 问题答案: 您不需要处理$ sce即可达到目的。 您可以将as字符串传递给指令。在指令中编译后,它将起作用

  • 问题内容: 我有这样的按钮 还有这个 上面的代码工作正常,但我想使其动态化。 所以我像下面这样改变它。 这行不通,我不知道为什么,尽管如果我检查元素,上面的代码会生成如前所述的正确代码。 问题答案: 括号符号的使用: 指向当前作用域对象,因此您可以通过变量名称访问方法。

  • 问题内容: 我有以下代码的视图: 目标是无需使用href即可过渡到新状态。不幸的是,上面的代码不会触发。 我还尝试为此视图在控制器中包括$ state: 但是仍然没有。transictionTo也似乎不起作用。 有人对如何进行这项工作有任何想法吗? 编辑:我只能通过分配使其工作: 在我的控制器内。这看起来很丑。如果没有将$ state分配给作用域,是否真的没有其他方法可以访问$ state? 问题

  • 问题内容: 这里有角的菜鸟。我正在创建一个指令以递归显示问题树和子问题树。我正在模板中使用链接,该链接在范围内调用函数。由于某种原因,它不会调用该方法。 这是代码和小提琴http://jsfiddle.net/madhums/n9KNv/ HTML: Javascript: 任何帮助理解这一点将不胜感激。 问题答案: 您遇到范围问题。由于您在指令中使用隔离范围,因此它不再有权访问具有的控制器范围。