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

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);