是的,ng-click
适用于图像。
如果没有更多代码,我无法告诉您为什么您的代码不起作用,但是您粘贴的代码将myFunction
在控制该元素的控制器范围内调用。
编辑
你绝对不需要为此使用 jQuery,如果你这样做了,它并没有真正以“角度”的心态来考虑它。
我的建议是制定一个指令来做到这一点。我用一个简单的例子创建了一个 plunker,它可能是什么样子。
这是一个摘要:
注意:因为动画对您很重要,所以请确保您包含ng-animate
src 并将其作为依赖项包含在您的应用模块定义中。使用与基本角度相同的动画版本。
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'])
现在为您的指令定义一个模板:
画廊部分.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' 数组中列出的每个项目都有一个图像。issrc
应该是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);
}
}
};
})
你会看到我使用了一个隔离作用域来使这个指令可重用并保持良好的分离。您不必这样做,但这是一种很好的做法。因此,该指令的 html 还必须传递您要放入图库中的图像,如下所示:
索引.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
类等的使用)。我强烈建议您在此处阅读此内容,因为这个(已经很长!)答案涵盖的主题太大了:
.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;
}
这是你的最终结果