AngularJS:ng-点击 img?使用 jQuery 操作图像(类似于画廊)?

2024-03-20

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

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

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

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

感谢您提供任何信息

EDIT当我第一次问这个问题时,我可能很着急。我现在知道为什么它在我的情况下不起作用:我正在使用 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 的一个)来改变这样的图像……

谢谢


Yes, ng-click适用于图像。

如果没有进一步的代码,我无法告诉你为什么你的代码不起作用,但你粘贴的代码将调用myFunction在控制该元素的控制器的范围内。

EDIT

你绝对不需要为此使用 jQuery,而且如果你这样做的话,它也不是真正以“角度”的思维方式来思考它。

我的建议是制定一项指令来做到这一点。我有创建了一个笨蛋 http://plnkr.co/edit/54bWNsZkTJM10V69V9Hd?p=preview用一个简单的例子来说明它的样子。

总结如下:

注意:由于动画对您很重要,因此请确保包括ng-animatesrc 并将其作为依赖项包含在您的应用程序模块定义中。使用与基本角度相同版本的 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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS:ng-点击 img?使用 jQuery 操作图像(类似于画廊)? 的相关文章

随机推荐