javascript - AngularJs - 在 标签的 onclick 事件上调用 $scope 函数

Question

我是 JS 和 AngularJs 的新手。在我的 Controller 中，我有以下代码:

      angular.forEach(resData, function(file) {
   $('.shelfgallery').append('<div class="responsive"><div class="gallery">' + '<img id="img' + fotoId + '" src="' + file + '" alt="Shelf Image" width="100" height="100" onclick="openImg(' + fotoId++ + ')"></img></div></div>');  });

如您所见，在事件“onClick”上 onclick="openImg(' + fotoId++ + ')" ，我调用openImg函数:

function openImg(id) {
var url = $('#img' + id).attr("src");};

一切正常，但我需要将 JS 函数“openImg”定义为 $scope 中的函数因为这样我就可以做很多事情，比如httppost。如何更改我的代码，使我的函数成为 $scope 的一部分，并且我可以从标签 <img> 调用它？

已更新我尝试使用Pengyy解释的方式，这是我的代码:

              angular.forEach(resData, function(file) {

               var element = angular.element($('.shelfgallery'));
               element.html('<div class="responsive"><div class="gallery">' +'<img id="img' + fotoId + '" src="' + file + 
                       '" alt="Shelf Image" width="100" height="100" ng-click="openImg(' 
                       + fotoId++ + ')"></img>');
               $compile(element)($scope)

                });

Answer 1

在 Angular 中，您可以使用 ng-click 属性来触发事件或函数。

为您的 img 元素提供 ng-click 事件来代替 onclick 事件

<img ng-click="anyFunction()" src="" />

在您的 Controller 或 JS 中，提供范围变量上的函数

$scope.anyFunction = function(){
 /// Do something
}