ng-click 应该与 img 标签一起使用吗？
<img ng-src="img" ng-click="openNewWindow(url)/>
myFunction 在 Controller 中定义并且 $scope 可用... 什么都没有被调用；有任何想法吗？
(我想在单击图像时打开一个新选项卡/窗口，但我什至没有进入我的函数)
感谢您提供任何信息
编辑 当我第一次问这个问题时，我可能很着急。我现在知道为什么它在我的情况下不起作用:我正在使用 jQuery 操作图像以获得某种“画廊”效果......(如果有人知道如何在 AngularJS 中做到这一点，请带上它)。这是我正在谈论的 html:
<div class="commercial-container">
<img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen)" />
<img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen2)" />
<img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen3)" />
<img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen4)" />
</div>
这里是我用来创建淡入/淡出效果的 jQuery(显示一个图像，然后显示下一个图像，依此类推)
function fadeInLastImg(){
var backImg = $('.commercial-container img:first');
backImg.hide();
backImg.remove();
$('.commercial-container' ).append( backImg );
backImg.fadeIn();
};
所以我真正的问题是:
- 如何获得与 jQuery 相同的行为，以便图像可点击？
如果你知道的话，你当然可以提供一个更好的解决方案(也许是 AngularJS 的一个)来更改这样的图像......
谢谢
最佳答案
是的，ng-click 适用于图像。
如果没有更多代码，我无法告诉您为什么您的代码不起作用，但您粘贴的代码将在管理该元素的 Controller 范围内调用 myFunction。
编辑
你绝对不需要为此使用 jQuery，而且如果你这样做的话，它也不是真正以“Angular ”的思维方式来思考它。
我的建议是制定一个指令来做到这一点。我有 created a plunker 和一个简单的例子来说明它的样子。
总结如下:
注意:由于动画对您很重要，因此请确保包含 ng-animate src 并将其作为依赖项包含在应用程序模块定义中。使用与基本 Angular 相同版本的 animate。
HTML
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular-animate.js"></script>
Javascript
angular.module("gallery", ['ngAnimate'])
现在为您的指令定义一个模板:
galleryPartial.html
<div class="container">
<img ng-src="{{image.url}}"
alt="{{image.name}}"
ng-repeat="image in images"
class="gallery-image fade-animation"
ng-click="openInNewWindow($index)"
ng-show="nowShowing==$index">
</div>
这个模板只是说“我想要范围内“images”数组中列出的每个项目都有一个图像。src 应该是图像的 url 属性，alt 文本应该是名称。当我单击图像时，运行 openInNewWindow 函数，传递该图像在数组中的索引。最后，隐藏图像，除非将 nowShowing 变量设置为其索引。”
另请注意类 fade-animation 。它可以被称为任何名称，但这是我们稍后将用来在 CSS 中定义动画的类。
接下来我们编写指令本身。这非常简单 - 只需使用此模板，然后定义 openInNewWindow 函数，并通过数组索引迭代 nowShowing:
.directive('galleryExample', function($interval, $window){
return {
restrict: 'A',
templateUrl: 'galleryPartial.html',
scope: {
images: '='
},
link: function(scope, element, attributes){
// Initialise the nowshowing variable to show the first image.
scope.nowShowing = 0;
// Set an interval to show the next image every couple of seconds.
$interval(function showNext(){
// Make sure we loop back to the start.
if(scope.nowShowing != scope.images.length - 1){
scope.nowShowing ++;
}
else{
scope.nowShowing = 0;
}
}, 2000);
// Image click behaviour
scope.openInNewWindow = function(index){
$window.open(scope.images[index].url);
}
}
};
})
您会看到我使用了 isolate scope 来使该指令可重用并保持良好的分离。您不必这样做，但这是一个很好的做法。因此，该指令的 html 还必须传递您想要放入图库中的图像，如下所示:
index.html
<body ng-controller="AppController">
<div gallery-example="" images="imageList"></div>
</body>
因此，我们需要编写的最后一段 javascript 是在 AppController 范围内填充该图像数组。通常，您会使用服务从服务器或其他设备获取图像列表，但在这种情况下，我们将对其进行硬编码:
.controller('AppController', function($scope){
$scope.imageList = [
{
url: 'http://placekitten.com/200/200',
name: 'Kitten 1'
},
{
url: 'http://placekitten.com/201/201',
name: 'Kitten 2'
},
{
url: 'http://placekitten.com/201/202',
name: 'Kitten 3'
},
{
url: 'http://placekitten.com/201/203',
name: 'Kitten 4'
}
]
})
最后是造型。这也将定义动画(注意 ng-hide 类等的使用)。我强烈推荐您 read up on this here，因为它太大了，无法在这个(已经很长!)答案中涵盖:
.fade-animation.ng-hide-add,
.fade-animation.ng-hide-remove {
-webkit-transition:0.5s linear all;
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
transition:0.5s linear all;
display:block !important;
opacity:1;
}
关于AngularJS:ng-点击 img？使用 jQuery 操作图像(类似于画廊)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22383345/