动态DOM AngularJS NG单击好好尝试一下工作的？ [英] ng-click doens't work on dynamic DOM AngularJS?

问题描述

我有一个这样的控制器：

  @VariantModalCtrl =（$范围） -  GT;
  $ scope.upload_variant_image =  - ＆GT;
    警报（测试）
 

当我尝试使用调用函数upload_variant_image吴单击，绑定到一个静态的DOM（DOM的负载时）时，它才能正常运行，我有这样一个链接：

 ＆LT;％=的link_to测试，，NG单击=＆GT; upload_variant_image（）％GT;
 

，但在加载的DOM后此元件被动态添加，所以纳克点击不起作用。

更新
刚发现我的答案的一部分使用$编译功能：
<一href=\"http://stackoverflow.com/questions/11771513/angularjs-jquery-how-to-get-dynamic-content-working-in-angularjs\">AngularJS + JQuery的：如何获得动态内容angularjs工作

但是当我在Rails的更新这样的DOM它不工作：

  $（模体）HTML（$编译（＆LT;％= j的渲染（/变种/表，：变种=＆GT; @variant） ％GT;）（范围））;
 

解决方案

我要提醒你，你可能无法完全拥抱角理念，如果你通过角外部手段操纵DOM。与AngularJS添加链接动态是其他任何东西一样简单可能比让你的外部库，以发挥好更容易，更地道。这是基于你的问题一个简单的例子：

 ＆LT; UL＆GT;
  ＆LT;李NG重复=中的项项＆GT;
    ＆下;一个纳克单击=upload_variant_image（）＆GT; {{item.name}}＆下; / A＆GT;
  ＆LT; /李＆GT;
＆LT; / UL＆GT;
 

所有你需要做的是正确的电缆铺设工作范围的数据，这将永远只是工作。

这是说，如果你是操纵DOM，您可以通过使用的$compile服务。不要考虑上面更好的选择，虽然。 ：）

I have a controller like this:

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

When I try to call upload_variant_image function using ng-click, it only works when binding to a static DOM (when the DOM loads), I have a link like this:

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

but this element is dynamically added after the DOM is loaded, so ng-click doesn't work.

Update Just found part of my answer using $compile function: AngularJS + JQuery : How to get dynamic content working in angularjs

BUT it doesn’t work when I update the DOM like this in Rails:

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

解决方案

I would warn you that you may not be fully embracing Angular philosophy if you're manipulating the DOM through Angular-external means. Adding links dynamically with AngularJS is as simple as anything else and will probably be much easier and more idiomatic than getting your external library to play nice. Here is a simple example based on your question:

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

All you need to do is wire up the scope data appropriately and this will always "just work."

That said, if you are manipulating the DOM, you can cause AngularJS bindings to occur (to, say, ng-click as you desire) by using $compile service. Do consider the above better option, though. :)

这篇关于动态DOM AngularJS NG单击好好尝试一下工作的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！