ng-click 未触发 [重复]答案

【问题标题】：ng-click is not firing [duplicate]ng-click 未触发 [重复]
【发布时间】：2017-08-23 08:03:02
【问题描述】：

将以下“超链接”添加到 html 中：

<a style="color:white" ng-click="ClickMe()"><i class="fa fa-trash-o" style="color:white"></i>Click</a>

然后使用此代码触发click 类似事件

 $scope.ClickMe = function () { alert("clicked"); }

工作正常，但是当像“超链接”这样动态生成时，这不起作用

 $('<a style="color:white" ng-click="ClickMe()"><i class="fa fa-trash-o" style="color:white"></i>Click</a>').insertAfter("#dashboard_link");

谁能解释为什么会这样？

【问题讨论】：

你不应该使用 jQuery 来修改带有 Angular 组件的 DOM。 jQuery 不更新 angular，所以 angular 不知道有一个新的绑定要监控。
渲染前需要编译代码...Please refer this
在你添加这个html的地方添加脚本。不推荐使用jQuery，使用指令和jQlite来实现

标签： javascript angularjs

【解决方案1】：

问题是当您使用 JQuery 时，您还没有在 DOM 中编译它。

您必须使用 $compile 来编译 HTML 字符串 或 DOM 进入模板并生成模板函数，然后可以使用该函数将范围和模板链接在一起。

意味着 $compile 编译新的 DOM 并将其链接到当前范围。

详情请参考to the AngularJs Docs。

【讨论】：

【解决方案2】：

如果您在控制器中：您将要使用 $compile 服务。

var el =  $('<a style="color:white" ng-click="ClickMe()"><i class="fa fa-trash-o" style="color:white"></i>Click</a>').insertAfter("#dashboard_link");

$compile(el)($scope);

不要忘记将 $compile 注入到你的控制器中。

然而，正如 cmets 中所指出的，有比使用 jquery 来操作 dom 更好的选择。

【讨论】：

假设这是在控制器中完成的；基于他们使用 jQuery 来修改 DOM 的事实，这很可能发生在 Angular 无法控制的地方。
不，真的不是。他们可能正在尝试修改 Angular 控制下的元素，但没有迹象表明此代码是否在控制器中。除了如果这是在控制器内部，还有比拖放到 jQuery 更好的方法来操作 DOM。
我认为假设 1 行 Angular、1 行 jQuery 和 1 行 HTML 是不安全的。

【解决方案3】：

Angular 在加载时处理绑定。由于元素是动态生成的，因此您也必须动态绑定它。

【讨论】：

【解决方案4】：

在您的超链接中使用 javascript:void(0)

【讨论】：

你能澄清这个答案吗？似乎提出了更多问题;-)
那行不通； angular 永远不会触发 ng-click，因为它不知道它的存在。