AngularJs - 從<img>標記

onclick事件調用$ scope函數我是新的JS和AngularJs。在我的控制，我有以下代碼：AngularJs - 從<img>標記

 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) 

       });

來源

2017-04-26 Majico

順便說一句。你的方法太「jQueryish」了。我建議在模板中使用ng-repeat，而不是使用jquery將每個項目發送到DOM。 –

您應該考慮使用ng-repeat動態生成html塊。

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

否則，您可以使用$compile在控制器追加HTML塊與angularjs內置指令，如NG-點擊。

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>

來源

2017-04-26 09:00:37 Pengyy

謝謝，但它顯示的只是最後一張圖片而不是所有圖片，當我點擊它時，它會給出錯誤：ReferenceError：範圍沒有在Child中定義爲 $ scope.openImg（app.js：156），i已經用我的解決方案和錯誤 – Majico

@Majico更新了我的文章所以，你選擇了第二種方法，然後使用'append'將解決你的第一個問題，再次檢查代碼片段。 – Pengyy

謝謝，但是當我點擊圖像，我有錯誤：ReferenceError：作用域沒有定義在Child。$ scope.openImg（app。js：156）我該如何解決這個問題？ – Majico

在角度，你可以使用NG-單擊屬性觸發事件或功能。

到位onclick事件中提供您與NG擊事件img元素

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

在您的控制器或JS，提供範圍變量

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

來源

2017-04-26 08:49:47 CrazyMac

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

來源

2017-04-26 08:49:55

當您使用AngularJS，我建議到角方式重寫這段代碼。它可以是這樣的：

<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 */ 
}

來源

2017-04-26 08:57:23 Mistalis

AngularJs - 從<img>標記

回答

相關問題