Question

所以我使用ng-repeat重复一些显示我的JSON文件中的图像的div。我想要做的是，当我点击该图像（无论是桌面还是手机）时，图像将会缩放。现在我的问题是，当我想在我的图像标签上创建一个click事件时（在div中包含ng-repeat），他什么也做不了。他看不到咔哒声。

我在互联网上发布了关于jquery和angular问题的一些内容，但对于我来说，作为一个初学者，我很难理解我必须做些什么才能使它成为我喜欢的工作。我只是希望能够在ng-repeated divs中的图像标记上放置一个jquery函数，所以我可以从那里操作css。

我在这里张贴了一段代码，也许我必须在控制器上添加一些内容？我不知道，此刻我无能为力。： - ）

<section class="words">
    <div class="colored-sidebar"></div>
    <!-- content -->
    <div class="previous-button"></div>
    <div class="word-container" ng-controller="imageController as imageCtrl">
      <h1><span>noun</span>words</h1>
      <div class="category-body">
        <p><span>noun</span>travel</p><hr>
        <div class="category-section" ng-repeat="icon in imageCtrl.imageList.travel">
          <!-- <div class="category-image" ng-include="icon.src"></div> -->
          <div class="category-image">
            <img src="{{icon.src}}" />
          </div>
        </div>
      </div>
  </section>

角度文件

    (function() {
    app.controller('imageController', function(){

     this.imageList = imageJson;

    });
        var imageJson = {
          //ALOT OF JSON DATA HERE//
        };
})();

我希望这段代码足以帮助我： - ）

欢迎任何提示，我喜欢更好地学习这门语言并且更好地理解它。

谢谢！

Answer 1

jQuery在这里不合适，因为当你在jQuery.ready（）中运行你的jQuery代码时，“category-image”类中的元素还没有被创建。

要解决您的问题，您可以使用两种方法：

1）使用之前提出的“ng-click”。您还可以将“$ index”传递给ng-click内的函数。这样，您将知道单击的imageList.travel中的图标索引。但是这样你就没有关于dom元素的信息。

2）创建一个指令。指令和控制器之间的主要区别在于该指令具有关于dom对象的信息。您可以将元素视为典型的jQuery对象

JS：

   app.directive('imageClick', [function () {
        return {
            link: function (scope, element, attr) {

               element.on("click", function(e){
                  //do some stuff here
               })
            }
        }
   }]);

HTML

<section class="words">
    <div class="colored-sidebar"></div>
    <!-- content -->
    <div class="previous-button"></div>
    <div class="word-container" ng-controller="imageController as imageCtrl">
      <h1><span>noun</span>words</h1>
      <div class="category-body">
        <p><span>noun</span>travel</p><hr>
        <div class="category-section" ng-repeat="icon in imageCtrl.imageList.travel">
          <!-- <div class="category-image" ng-include="icon.src"></div> -->
          <div class="category-image">
            <img image-click src="{{icon.src}}" />
          </div>
        </div>
      </div>
  </section>

Angular ng-repeat，Jquery失败

1 个答案: