I am new with JS and AngularJs. In my controller i have the following code:

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

as you can see, on the event "onClick" onclick="openImg(' + fotoId++ + ')", i call the openImg function:

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

every thing works fine, but i need to define the JS function "openImg" as a function in $scope because then I can do many things such as httppost. How can I change my code in the way that my function is part of $scope and i can call it from the tag <img> ?

UPDATED i have tried to use the way which has explained by Pengyy and here is my code:

              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>');
               $pile(element)($scope)

                });

I am new with JS and AngularJs. In my controller i have the following code:

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

as you can see, on the event "onClick" onclick="openImg(' + fotoId++ + ')", i call the openImg function:

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

every thing works fine, but i need to define the JS function "openImg" as a function in $scope because then I can do many things such as httppost. How can I change my code in the way that my function is part of $scope and i can call it from the tag <img> ?

UPDATED i have tried to use the way which has explained by Pengyy and here is my code:

              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>');
               $pile(element)($scope)

                });

• javascript
• angularjs

• 3 Btw. Your approach is too much "jQueryish". I suggest using ng-repeat in the template instead of .appending each item to the DOM using jquery. – Zdenek Hatak Commented Apr 26, 2017 at 8:50

4 Answers 4

In Angular, you can use ng-click attribute to trigger an event or function.

Provide your img element with the ng-click event in place of onclick event

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

In your controller or JS, provide the function on the scope variable

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

You should consider using ng-repeat to generate html block dynamically.

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

Otherwise, you can use $pile in controller to append html block with angularjs built-in directive, such as ng-click.

angular.module("app", [])
  .controller("myCtrl", function($scope, $pile) {
    $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>');
      $pile(element)($scope);
    };
    
    $scope.openImg = function() {
      var url = $('#img_11').attr("src");
      alert(url);
    };
  });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis./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>

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

Use ng-click instead of onclick. And controller will be like

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

As you are using AngularJS, I would suggest to rewrite this code the Angular way. It can be something like:

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

Your openImg function may be:

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