Fatal编程技术网
  • angularjs/
  • AngularJS:ng点击img？用jQuery处理图像（有点像画廊）？

AngularJS:ng点击img？用jQuery处理图像（有点像画廊）？

angularjs

AngularJS:ng点击img？用jQuery处理图像（有点像画廊）？,angularjs,angularjs-ng-click,Angularjs,Angularjs Ng Click,ng是否应使用img标记单击工作 <img ng-src="img" ng-click="openNewWindow(url)/> 所以我真正的问题是： 如何获得与jQuery相同的行为，以便图像可以单击 你当然可以提供一个更好的解决方案（也许是AngularJS的一个）来改变像这样的图像，如果你知道一个 谢谢你是的，ng单击可以处理图像 如果没有进一步的代码，我无法告诉您为什么您的代码不起作用，但是您粘贴的代码将在管理该元素的控制器的范围内调用myFunction 编辑 您肯

ng是否应使用img标记单击工作

<img ng-src="img" ng-click="openNewWindow(url)/>
所以我真正的问题是：

  • 如何获得与jQuery相同的行为，以便图像可以单击
你当然可以提供一个更好的解决方案（也许是AngularJS的一个）来改变像这样的图像，如果你知道一个

谢谢你

是的，
ng单击
可以处理图像

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

编辑

您肯定不需要为此使用jQuery，而且如果您这样做，它也不会真正以“角度”的心态来考虑它

我的建议是制定一个这样做的指令。我举了一个简单的例子来说明它可能是什么样子

以下是总结：

注意：由于动画对您很重要，请确保包括
ng animate
src，并将其作为依赖项包含在应用程序模块定义中。使用与“基本角度”相同的动画版本

HTML

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>

  <body ng-controller="AppController">
    <div gallery-example="" images="imageList"></div>
  </body>
您将看到，我使用了一个函数来使这个指令可重用，并使事情很好地分开。你不必这么做，但这是一个很好的练习。因此，指令的html还必须传递要放入库中的图像，如下所示：

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

  <body ng-controller="AppController">
    <div gallery-example="" images="imageList"></div>
  </body>
最后是造型。这也将定义动画（注意
ng hide
类等的使用）。我强烈推荐您，因为这是一个太大的主题，无法在这个（已经很长了！）答案中涵盖：

编辑 因为正如您在评论中所说的，bootstrap不适合您，所以我建议您编写自己的小指令。可能有很多教程，比如

本例中的问题是，您从角度范围之外操作DOM。因此，Angular iteslf甚至不知道这些新的图像元素，更不用说ng click和ng src指令了。只有使用Angulars自己的$compile服务将图像放回DOM中，才会出现这种情况

我建议您使用图像库。
否则，您需要为此创建自己的指令，但为什么要重新发明轮子呢？

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

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

var backImg = $('.commercial-container a:first');
我在使用angularJS的别名时遇到了这个问题。如果我这样写：

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

    vm.switchSelected = function (passedEvent) {
    }
}

<img ng-src="{{si}}" width="230px" ng-click="tbc.switchSelected($event)"/>
然后，如果在html代码中写入以下内容：

<div ng-controller="toolBoxController as tbc">
在你的控制器里。然后您需要向html部分添加别名。

您能提供更多信息吗？发布控制器的整个HTML范围以及控制器iteslf。否则很难猜出什么是错的。@Charminbaer请看我编辑的问题你能提供一把小提琴或什么吗？我不能像我的情况那样用小提琴工作：/首先谢谢你的时间-你是对的；ng click确实像我描述的那样工作。但不幸的是，在我的例子中，当使用jQuery时，它也没有。请查看我编辑的问题，了解更多详细信息。很遗憾，最终结果不会打开任何内容；只是说“找不到”。有什么想法吗？谢谢你抽出时间。使用UI引导时，我必须使用引导的CSS，而我的页面不使用CSS。它通常会破坏自定义CSS，至少在我尝试将其仅用于页面的一部分时是这样。我不确定carousel（gallery）对我来说是否足够定制：你可能无法删除除图像之外的所有内容，对吧？对我来说，引导css从未破坏过任何东西。但是如果你没有选择，唯一剩下的就是写你自己的指令。请参见我答案中的编辑。我最终将图像包装到元素中，并将jQuery改为先取，而不是使用：first…感谢您的回答，这不是一种非常好的“有角度”的做事方式-但如果它对您有效，那么好吧；）我知道，但由于事情需要做，而且没有足够的时间深入了解更多细节，我同意了（这并不意味着我不同意你的意见，我完全同意） 
var backImg = $('.commercial-container a:first');

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

    vm.switchSelected = function (passedEvent) {
    }
}

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

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

 var vm=this;