16

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

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

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

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

感谢您提供任何信息

编辑 我第一次问这个问题时可能会匆匆忙忙。我现在知道为什么它在我的情况下不起作用:我正在使用 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 之一)来改变这样的图像……

谢谢

4

4 回答 4

27

是的,ng-click适用于图像。

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

编辑

你绝对不需要为此使用 jQuery,如果你这样做了,它并没有真正以“角度”的心态来考虑它。

我的建议是制定一个指令来做到这一点。我用一个简单的例子创建了一个 plunker,它可能是什么样子。

这是一个摘要:

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

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

这是你的最终结果

于 2014-03-13T16:24:26.727 回答
0

我最终用链接包装了每个图像并适当地更改了 jQuery。这对我来说是最快和最简单的。

<a href="url" target="_blank">
   <img class="commercial" ng-src="pathToImageOrImageVar"/>
</a>

并换线

var backImg = $('.commercial-container img:first');

变成

var backImg = $('.commercial-container a:first');
于 2014-03-14T10:37:20.307 回答
0

编辑 因为正如您在评论中所说,引导程序不适合您,我建议您编写自己的小指令。可能有很多这样的教程


您的问题是,您从 Angular-Scope 之外操作 DOM。所以 Angular iteslf 甚至不知道那些新的图像元素,更不知道 ng-click 和 ng-src 指令。只有当您使用 Angulars 自己的 $compile-Service 将图像放回 DOM 时,才会出现这种情况。

我建议您将Angular-UI Bootstrap用于图片库。否则,您需要为此创建自己的指令,但为什么要重新发明轮子呢?

于 2014-03-14T07:45:39.093 回答
0

当我使用 angularJS 的别名时,我遇到了这个问题。如果我写了这样的东西:

function someController($scope) {
    var vm = this;

    vm.switchSelected = function (passedEvent) {
    }
}

然后如果在html代码中编写如下:

<div ng-controller="toolBoxController as tbc">

然后为了使用 switchSelected 你需要写这样的东西:

<img ng-src="{{si}}" width="230px" ng-click="tbc.switchSelected($event)"/>

所以,检查你是否使用过

 var vm=this;

在您的控制器中。然后你需要为你的 html 部分添加别名。

于 2016-02-15T16:03:49.567 回答