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

问题描述

ng-click 应该与 img 标签一起使用吗?

myFunction 在控制器中定义并且 $scope 可用......什么都不会被调用；有任何想法吗?

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

感谢您提供任何信息

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

<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)"/>

这里是我用来创建淡入/淡出效果的 jQuery(显示一个图像，然后是下一个，以此类推)

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

所以我真正的问题是:

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

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

谢谢

解决方案

是的，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'])

现在为您的指令定义模板:

galleryPartial.html

<img ng-src="{{image.url}}"alt="{{image.name}}"ng-repeat="图像中的图像"类=画廊图像淡入淡出动画"ng-click="openInNewWindow($index)"ng-show="nowShowing==$index">

这个模板只是说我想要一个图像，用于范围内 'images' 数组中列出的每个项目.src 应该是 url图像的属性，alt 文本应该是名称.当我单击图像时，运行 openInNewWindow 函数，传递该图像在数组中的索引.最后，隐藏图像，除非 nowShowing 变量设置为它们的索引."

还要注意 fade-animation 类.这可以称为任何名称，但这是我们稍后将用于在 CSS 中定义动画的类.

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

.directive('galleryExample', function($interval, $window){返回 {限制:'A'，templateUrl: 'galleryPartial.html',范围: {图像:'='},链接:功能(范围，元素，属性){//初始化 nowshowing 变量以显示第一张图像.范围.nowShowing = 0;//设置一个间隔，每隔几秒显示下一张图像.$interval(函数showNext(){//确保我们循环回到起点.if(scope.nowShowing != scope.images.length - 1){scope.nowShowing ++;}别的{范围.nowShowing = 0;}}, 2000);//图片点击行为scope.openInNewWindow = 函数(索引){$window.open(scope.images[index].url);}}};})

你会看到我使用了一个 isolate scope 来使这个指令可重用并保持良好的分离.您不必这样做，但这是一种很好的做法.因此，指令的 html 还必须传递您想要放入图库的图像，如下所示:

index.html

 <div gallery-example="" images="imageList"></div>

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

.controller('AppController', function($scope){$scope.imageList = [{网址:'http://placekitten.com/200/200',名称:'小猫1'},{网址:'http://placekitten.com/201/201',名称:'小猫2'},{网址:'http://placekitten.com/201/202',名称:'小猫3'},{网址:'http://placekitten.com/201/203',名称:'小猫4'}]})

最后，造型.这也将定义动画(注意 ng-hide 类等的使用).我强烈推荐你 在此处阅读此内容，因为它是一个太大的主题(已经很长了！)答案:

.fade-animation.ng-hide-add,.fade-animation.ng-hide-remove {-webkit-transition:0.5s 线性全部；-moz-transition:0.5s 线性所有；-o-transition:0.5s 线性全部；过渡:0.5s线性全部；显示:阻止！重要；不透明度:1；}

这是您的最终结果

Should ng-click work with img tag ?

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

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)

Thanks for any info

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>

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

So my real question is this:

• How can I get the same behaviour as with my jQuery so that images will be ng-clickable?

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

Thank you

解决方案

Yes, ng-click works on images.

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.

EDIT

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.

Here's a summary:

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'])

Now Define a template for your directive:

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>

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."

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.

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

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>

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'
    }
  ]
})

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

This is your end result

这篇关于AngularJS:ng-单击 img?使用 jQuery 操作图像(有点像画廊)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！