Yes, ng-click
适用于图像。
如果没有进一步的代码,我无法告诉你为什么你的代码不起作用,但你粘贴的代码将调用myFunction
在控制该元素的控制器的范围内。
EDIT
你绝对不需要为此使用 jQuery,而且如果你这样做的话,它也不是真正以“角度”的思维方式来思考它。
我的建议是制定一项指令来做到这一点。我有创建了一个笨蛋 http://plnkr.co/edit/54bWNsZkTJM10V69V9Hd?p=preview用一个简单的例子来说明它的样子。
总结如下:
注意:由于动画对您很重要,因此请确保包括ng-animate
src 并将其作为依赖项包含在您的应用程序模块定义中。使用与基本角度相同版本的 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);
}
}
};
})
你会看到我使用了隔离范围 https://egghead.io/lessons/angularjs-understanding-isolate-scope使该指令可重用并保持良好的分离。您不必这样做,但这是一个很好的做法。因此,该指令的 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
类等)。我强烈推荐你在这里阅读这个 http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#animating-ngshow-and-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;
}
这是你的最终结果 http://plnkr.co/edit/54bWNsZkTJM10V69V9Hd?p=preview