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

Question

嗨，我正在开发angularjs应用程序。我已经生成了带有锚标签的列表。我正在使用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 点击功能。

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

每当我单击用户配置文件时，我都不会收到任何错误，但我无法转到gotouser配置文件功能。我检查了浏览器。生成的代码如下。

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

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

Answer 1

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

$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>

Answer 2

你可以尝试这样的事情：

var profileDropDown = '  <div data-drop-down>' + ' <ul>' +
'<li ><a ng-click=gotouserprofile()>User Profile</a></li>' +
'</ul>'+'</div>';
var temp = $compile(profileDropDown)($scope);
angular.element(document.getElementById('ProfileDropdown')).append(temp);