javascript - Angularjs ng-click 在动态生成的列表标签中不起作用

Question

嗨，我正在开发 angularjs 应用程序。我已经生成了带有 anchor 标记的列表。我正在使用 ng-click 来执行一些任务。 ng-click 内编写的函数未触发。我有以下代码。

var id = document.getElementById('ProfileDropdown');
id.innerHTML = $scope.ProfileDropdown = '  <div data-drop-down>' + ' <ul>' +
'<li ><a ng-click=gotouserprofile()>User Profile</a></li>' +
'</ul>'+'</div>';

下面是我的 ng-click 函数。

 $scope.gotouserprofile=function(){
    debugger;
    $state.go('Dashboard.Userprofile');
}

每当我单击用户个人资料时，我都不会收到任何错误，但我无法转到 gotouserprofile 功能。我在浏览器中检查过。生成以下代码。

<a ng-click="gotouserprofile()">User Profile</a>

我可以知道我在上面的代码中遗漏了一些东西吗？任何帮助，将不胜感激。谢谢。

Answer 1

需要再次编译 Dom 才能调用作用域函数。使用这个

$compile(id)($scope);

angular.module("app",[])
.controller("ctrl",function($scope,$compile){

var id = document.getElementById('ProfileDropdown');
id.innerHTML = '  <div data-drop-down>' + ' <ul>' +
'<li ><a ng-click=gotouserprofile()>User Profile</a></li>' +
'</ul>'+'</div>';

$compile(id)($scope);

$scope.gotouserprofile=function(){ 
    console.log("working")
}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div id="ProfileDropdown" ></div>
</div>