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 操作图像(类似于画廊)? 的相关文章

  • AngularJs 数据绑定不适用于 ionic

    我觉得我在离子输入文本中遗漏了一些明显的东西 我在用angular ui router这条路线 stateProvider state findPersons url findPersons templateUrl html findPer
  • Angularjs 手表服务对象

    为什么我无法观看服务中的对象 我有一个简单的变量可以工作 但是一个对象不能工作 http plnkr co edit S4b2g3baS7dwQt3t8XEK p preview http plnkr co edit S4b2g3baS7d
  • Angular.js:未捕获的错误,没有模块:myapp

    我也在尝试引导 angular js 项目 这是我的index html div p Loading p div
  • 如何在angularjs中使用addClass方法

    我有一个仅限于类的 angularjs 指令 如何使用 angularjs 中的 addClass 方法添加它 指示 app directive number function return restrict C link function
  • Angular UI 模式的范围问题

    我无法理解 使用角度 UI 模式的范围 虽然这里不是很明显 但我已经正确设置了模块和所有内容 据我所知 但这些代码示例尤其是我发现错误的地方 index html 其中重要部分 div class btn group div
  • $exceptionHandler 中的 $location - 依赖冲突

    我正在尝试实现一个非常标准的任务 当发生异常时 重定向到我的 error page 代码的简化形式如下所示 app factory exceptionHandler location function location return fun
  • Protractor+AngularJS+Jasmine - 测试按住项目

    AngularJS 和 Protractor 非常新 但我认为到目前为止我正在朝着正确的方向前进 我的网站有一个项目列表 当您单击该项目并按住 X 秒时 它会打开一个模式窗口 我如何在 Protractor Jasmine 中模拟这种行为
  • 如何制作没有 ng-repeat 的模板并使用 Angular-drag-and-drop-lists 将数据传递到 $scope?

    我想用角度拖放列表 https github com marceljuenemann angular drag and drop lists使用我自己的网格模板到所见即所得编辑器 如何构建我自己的 HTML 模板而不需要ng repeat因
  • 如何在 angular-ui 中动态禁用 ui-sortable 指令

    我正在使用 Angular ui 使用 ui sortable 指令进行排序 是否可以根据范围状态动态启用 禁用可排序功能 因此 我需要一个按钮来更改范围属性的状态 并且根据此属性可排序是否应该工作 角度指令支持观察可排序选项何时发生变化
  • Angular JS $location.path(...) 不触发路由控制器

    所以我尝试使用更新表单提交上的路径 location path search 但它没有触发注册的路线 search 我也尝试过使用尾部斜杠 没办法 我也试过了 scope apply但我刚刚得到 apply already in progr
  • HTML5 URL 模式下 AngularJS 的 Flask 路由

    我有一个通过 Flask 提供服务的 AngularJS 应用程序 我使用的是 HTML5 路由模式 因此需要将多个 URL 重定向到客户端应用程序 我不确定如何进行通配符匹配才能正确执行此操作 目前我只是匹配多个级别的路径 如下所示 ap
  • 指令可以从父作用域中删除自身吗

    假设我有以下代码 div div div div 我的自定义指令有一个独立的范围 定义为 app directive customDirective function log return restrict E templateUrl te
  • 消息:函数在 5000 毫秒后超时 - Protractor & CucumberJS

    cucumberjs version 1 2 2 protractor version 4 0 1 Both installed globally via npm 升级到上面的 cucumberJs 版本后 我不断收到此错误 Failure
  • 指令中的 Angular + 茉莉花 + 模拟 $stateParams

    在指令中模拟 stateParams 的最佳方法是什么 stateParam成员会根据测试而改变 我可以使用 controller ctrl stateParams 轻松模拟控制器中的 stateParams 但不知道如何修改注入指令的 s
  • 如何发布数组多维角度js

    我在 angularjs 中有一个数组 示例如下 scope order qty 20 scope order adress Bekasi scope order city Bekasi 这个数组可以用这个代码发布 http method
  • 卸载/销毁 Angular 延迟加载组件

    我的设置与此处找到的帖子类似http ify io lazy loading in angularjs http ify io lazy loading in angularjs 处理 Angular 中我的应用程序的各种组件的延迟加载 我
  • 获得一次性绑定以适用于 ng-if

    这个问题已经被之前问过 https stackoverflow com questions 23969926 angular lazy one time binding for expressions 但我无法让该解决方案发挥作用 所以我想
  • 测试 AngularJs 的 $http.defaults.headers.common 是否设置了特定标头

    所以我对 JavaScript 和 AngularJS 的世界还是个新手 因此我的代码还没有达到应有的水平 但它正在改进 尽管如此 我开始学习并实现一个带有 REST 后端的简单登录页面 提交登录表单后 将返回一个身份验证令牌并将其设置为默
  • 有没有办法禁用所选 DOM 元素的 Angular 双大括号表示法?

    在我们的网站上 我们显示用户生成的内容 博客文章等 它由 Symfony 应用程序呈现 前端目前正在以 Angular 应用程序的形式重写 现在我们注意到 当用户的博客文章包含双花括号符号时 Angular 会处理它 这是不希望的 Angu
  • AngularJS:初始化指令内的隔离范围

    我创建了一个指令 它接受一些属性并使用这些属性初始化隔离范围 如果未指定属性 则应使用计算值初始化隔离范围 我添加了一个链接函数 用于检查范围并初始化默认值 如果未使用属性设置值 范围已初始化 但如果我设置默认值 那么它稍后会被框架覆盖 一

随机推荐