Javascript AngularJs-从<；调用onclick事件上的$scope函数；img>；标签

我是JS和AngularJs的新手。在我的控制器中，我有以下代码：

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

每件事都很好，但我需要将JS函数“openImg”定义为

$scope

中的一个函数，因为这样我就可以做很多事情，比如httppost。如何更改代码，使我的函数成为$scope的一部分，并且可以从标记

”调用它；
$compile（元素）（$scope）
});

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

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

              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)

                });

---

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

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

              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)

                });

---

当您使用AngularJS时，我建议您以AngularJS的方式重写此代码。它可以是这样的：

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

---

当您使用AngularJS时，我建议您以AngularJS的方式重写此代码。它可以是这样的：

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

---

您应该考虑使用<代码> NG Reals>代码>动态生成HTML块。

$scope.openImg = function(file) {
    console.log(file); /* file contains the whole object you have clicked on */
}

添加
<代码> > p>您应该考虑使用<代码> NG Reals>代码>动态生成HTML块。
$scope.openImg = function(file) {
    console.log(file); /* file contains the whole object you have clicked on */
}


添加
顺便说一句，你的方法太“急躁”。我建议在模板中使用ng repeat，而不是使用jquery.Btw将每个项追加到DOM中。你的方法太“急躁”。我建议在模板中使用ng repeat，而不是。使用jquery将每个项附加到DOM。谢谢，但它只显示最后一个图像而不是所有图像，当我单击它时，它给出错误：ReferenceError:scope未在Child处定义。$scope.openImg（app.js:156），我已经用我的解决方案和error@Majico因此，您选择了第二种方法，然后使用
append
将解决您的第一个问题，再次检查代码段。谢谢，但当我单击图像时，出现了错误：ReferenceError:scope未在Child处定义。$scope.openImg（app.js:156）我怎么解决这个问题？@Majico我们在这里聊天吧。谢谢，但它只显示最后一张图像，而不是所有图像，当我点击它时，它会给出错误：ReferenceError:scope未在Child定义。$scope.openImg（app.js:156），我已经用我的解决方案和error@Majico因此您选择了第二种方法，然后使用
append
将解决第一个问题，再次检查代码段。谢谢，但当我单击图像时，出现了错误：ReferenceError:scope未在Child中定义。$scope.openImg（app.js:156）如何解决此问题？@Majico让我们在此处聊天。
<div class="shelfgallery">
    <div class="responsive" ng-repeat="file in resData">
        <img ng-src="file.src" ng-click="openImg(file)"/>
    </div>
</div>

$scope.openImg = function(file) {
    console.log(file); /* file contains the whole object you have clicked on */
}

<div class="responsive" ng-repeat="file of resData">
  <img id="img" src="file" ng-click="openImg(resData.fotoid)"></img> 
</div>