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

正如您所看到的，在事件＆＃34; onClick＆＃34; onclick="openImg(' + fotoId++ + ')"，我称之为openImg函数：

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

每件事情都很好，但我需要定义JS函数＆＃34; openImg＆＃34;作为$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="" />

在您的控制器或JS中，提供范围变量

的功能

$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内置指令的html块，例如ng-click。

＆＃13;

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

＆＃13;

<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>

＆＃13;

AngularJs - 在<img/>标记的onclick事件上调用$ scope函数

4 个答案: