AngularJs-在以下位置的onclick事件上调用$ scope函数 <img> 标签

Question

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

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

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

一切正常，但是我需要在$scope中将JS函数“ openImg”定义为函数，因为那样我就可以做很多事情，例如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="" />

在控制器或JS中，在scope变量上提供函数

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

Answer 2

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" 
       ng-click="openImg(' + fotoId++ + ')"></img></div></div>');
  });

使用ng-click代替onclick。 和控制器将像

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

Answer 3

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

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

您的openImg函数可能是：

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

Answer 4

您应该考虑使用ng-repeat动态生成html块。

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

否则，您可以在控制器中使用$compile ，以使用angularjs内置指令（例如ng-click）附加html块。

 angular.module("app", []) .controller("myCtrl", function($scope, $compile) { $scope.name = 'test value'; $scope.test = function() { var element = angular.element($('.shelfgallery')); element.append('<img id="img_11" src="http://placehold.it/350x150" ng-click="openImg()"></img>'); $compile(element)($scope); }; $scope.openImg = function() { var url = $('#img_11').attr("src"); alert(url); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <div ng-app="app" ng-controller="myCtrl"> <input type="text" ng-model="name"> <button ng-click="test()">Add</button> <div class="shelfgallery"></div> </div>