Ionic ng-click在使用append函数时不起作用

e5nqia27  于 2023-05-11  发布在  Ionic
关注(0)|答案(4)|浏览(272)

我尝试在创建动态元素时使用ng-click调用函数,但到目前为止还没有成功。这是我的代码

$scope.myfunc = function(){
    alert("anything")
}

var divtoappend=angular.element( document.querySelector('#slist'));
divtoappend.append("<button class = 'optv' ng-click='myfunc()'>" +mybutton+ "</button>");
...

单击时不会抛出错误,也不会发生任何事情

6ie5vjzr

6ie5vjzr1#

在注入到DOM树之前,你必须使用$compile API编译DOM,如下所示。

divtoappend.append($compile("<button class = 'optv' ng-click='myfunc()'>" +mybutton+ "</button>")($scope));

通过编译DOM,angular将所有HTML级别的绑定放在$scope$$watchers数组中,以确保UI在每个摘要周期都是最新的。

fiei3ece

fiei3ece2#

您需要编译动态生成的HTML,以便它在AngularJS的范围内。只需要在append方法内部编译就可以了

divtoappend.append($compile("<button class = 'optv' ng-click='myfunc()'>" +mybutton+ "</button>")($scope));

在此之前,在控制器中注入$compile
我创建了一个plunkr,请参阅此plunkr link

6ojccjat

6ojccjat3#

您需要使用$compile编译DOM元素,如下所示

$compile(divtoappent)(scope);
jc3wubiy

jc3wubiy4#

注入{$compile}后,您可以执行以下操作:

angular.element('#groupList').append($this.$compile("<div id='Somevalue'> divText <button type='button' class='close' ng-click='yourFunctionHere'>&times;</button></div>")($this.$scope));

其中:'#groupList'是将接收其他div的div

相关问题