AngularJS:ng单击img?使用jQuery处理图片(有点像画廊)? [英] AngularJS: ng-click on img? Manipulating images (kind of gallery-like) with jQuery?

问题描述

ng-click是否可以与img标签一起使用?

Should ng-click work with img tag ?

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

myFunction在控制器中定义，并且$ scope是可用的…… 什么都没有叫；有任何想法吗?

myFunction is defined in controller and is $scope available … Nothing gets called; any ideas?

(单击图像时我想打开一个新的选项卡/窗口，但我什至没有进入功能)

(I would like to open a new tab/window when image is clicked, but I don't even get into my function)

感谢您提供任何信息

编辑 当我第一次问这个问题时，我可能会着急.我现在知道为什么在我的情况下不起作用:我正在使用jQuery处理图像，以获得某种画廊"效果…(如果有人知道如何在AngularJS中做到这一点，请启用它).这是我正在谈论的html:

EDIT I probably rushed myself when first asking this question. I know now why it doesn't work in my case: I am manipulating images with jQuery for some kind a 'gallery' effect … (if anyone has an idea how to do that in AngularJS please bring it on). This is the html I am talking about:

<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(先显示一个图像，然后无限显示下一个图像)

And here the jQuery with which I create fade-in/fade-out effect (showing one image, then the next and so on indefinitely)

 function fadeInLastImg(){
    var backImg = $('.commercial-container img:first');
    backImg.hide();
    backImg.remove();
    $('.commercial-container' ).append( backImg );
    backImg.fadeIn();
};

所以我的真正问题是:

• 如何获得与jQuery相同的行为，以便图像可以ng-clickable?

如果您知道这样的话，您当然可以提供一种更好的解决方案(也许是AngularJS一种)来更改图像...

You can of course provide a better solution (perhaps AngularJS one) for changing images like this if you know one …

谢谢

推荐答案

是的，ng-click适用于图像.

没有更多代码，我无法告诉您为什么您的代码不起作用，但是您粘贴的代码将在控制该元素的控制器范围内调用myFunction.

Without further code I can't tell you why yours isn't working, but the code you have pasted will call myFunction in the scope of the controller governing that element.

编辑

您绝对不需要为此使用jQuery，并且如果您这样做的话，它并不是真的在成角度的"思维方式中考虑它.

You definitely don't need to use jQuery for this, and it's not really thinking about it in an "angular" mindset if you do.

我的建议是制定一条指令来做到这一点.我已经创建了一个小酒杯，上面有一个简单的外观示例.

My suggestion is to make a directive to do this. I've created a plunker with a simple example of what it could look like.

以下是摘要:

注意:因为动画对您很重要，所以请确保包含ng-animate src并将其作为依赖项包含在应用程序模块定义中.使用与基角相同的动画版本.

Note: Because animation is important to you, make sure you include the ng-animate src and include it as a dependency in your app module definition. Use the same version of animate as base angular.

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变量设置为其索引，否则请隐藏图像."

This template simply says "I want one image for every item listed in the 'images' array from the scope. The src is should be the url property of the image, and the alt text should be the name. When I click an image, run the openInNewWindow function passing the index of that image in the array. Finally, hide images unless the nowShowing variable is set to their index."

还要注意类fade-animation.可以叫任何东西，但这是我们稍后将在CSS中定义动画的类.

Also note the class fade-animation. This could be called anything, but this is the class we'll use to define the animation in CSS later.

接下来，我们编写指令本身.这非常简单-只需使用此模板，然后定义openInNewWindow函数，并通过数组索引迭代nowShowing:

Next we write the directive itself. It's pretty simple - it just has to use this template, and then define the openInNewWindow function, as well as iterate nowShowing through the array indexes:

.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还必须传递要放入图库中的图像，如下所示:

You will see I have used an isolate scope to make this directive reusable and to keep things separated nicely. You don't have to do this, but it's good practice. The html for the directive must therefore also pass the images you want to put in the gallery, like so:

index.html

  <body ng-controller="AppController">
    <div gallery-example="" images="imageList"></div>
  </body>

因此，我们需要编写的javascript代码的最后一部分是在AppController范围内填充该图像数组.通常，您会使用服务从服务器或其他设备获取图像列表，但是在这种情况下，我们将对其进行硬编码:

So the last bit of javascript we need to write is to populate that images array in the AppController scope. Normally you'd use a service to get a list of images from a server or something, but in this case we'll hard code it:

.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类等).我强烈建议您

Finally, styling. This will also define the animation (note the use of ng-hide classes etc). I strongly recommend you read up on this here as it is too big a subject to cover in this (already long!) answer:

.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处理图片(有点像画廊)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！