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

＆＃13;

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")
}
})

＆＃13;

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

＆＃13;

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

Angularjs ng-click无法在动态生成的列表标记中使用

2 个答案: