如何调用div中附加的angularjs函数

Question

$scope.showtbleoption =  function(id)
{
    console.log(id);
    $("#showoption").empty();
    $("#showoption").append('<button class="btn btn-info" ng-click="editrc(id)">');
};

如何在angularjs控制器中调用editrc（）函数？

Answer 1

使用jQuery追加原始DOM会使angular指令编译。 你必须使用$compile服务，你将首先$compile该DOM，然后在DOM树中注入该DOM。 $compile是要求DOM的API函数（返回函数），然后你可以通过传递$scope来针对特定context进行求值来再次调用该函数。 $compile API方法将负责编译DOM和更新bindings所有指令。

在下面的情况下， id值不会直接在$scope可用，您可以将其存储在范围变量中，也可以通过字符串连接传递它。

var compiledDom=$compile('<button class="btn btn-info" ng-click="editrc('+id+')">')($scope);
$("#showoption").append(compiledDom);

Answer 2

而不是使用jQuery附加，使用$compile服务将其绑定到dom。 像这样：

$scope.domEle = $compile('<button class="btn btn-info" ng-click="editrc(id)">')

并在HTML中调用如下：

{{ domeEle }}

并在控制器中定义editrc函数，如下所示：

$scope.editrc = function(val){

}

Answer 3

您可以使用ng-bind-html指令动态地将html绑定到模板。 但是，你必须通过$compile(<html>)使用$ compile $compile(<html>) 。 编译后的html中提到的任何表达式都可以调用您在控制器中提供的定义。

如何调用div中附加的angularjs函数

问题描述

3 个解决方案

解决方案1
3 已采纳 2017-04-03 05:40:56

解决方案2
0 2017-04-03 05:41:20

解决方案3
0 2017-04-03 05:48:08

如何调用div中附加的angularjs函数

问题描述

3 个解决方案

解决方案1 3 已采纳 2017-04-03 05:40:56

解决方案2 0 2017-04-03 05:41:20

解决方案3 0 2017-04-03 05:48:08

解决方案1
3 已采纳 2017-04-03 05:40:56

解决方案2
0 2017-04-03 05:41:20

解决方案3
0 2017-04-03 05:48:08