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服务，通过该服务{DOM}优先$compile然后在DOM树中注入该DOM。 $compile是请求DOM的API函数（返回函数），然后您可以通过传递$scope来针对特定context进行评估来再次调用该函数。 $compile API方法将负责编译DOM和＆amp ;;的所有指令。更新bindings。

在下面的情况id中，$scope值不能直接在var compiledDom=$compile('<button class="btn btn-info" ng-click="editrc('+id+')">')($scope); $("#showoption").append(compiledDom);内使用，您可以将其存储在范围变量中，也可以通过字符串连接传递它。

-O2

Answer 2

使用$scope.domEle = $compile('<button class="btn btn-info" ng-click="editrc(id)">')服务将其绑定到dom，而不是使用jQuery追加。像这样：

{{ domeEle }}

并在HTML中调用如下：

$scope.editrc = function(val){

}

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

<div class="main">
  <div class="content">
    // you content goes here...
  </div>
</div>

Answer 3

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

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

3 个答案: