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>