如何在 angularjs 中的简单获取请求 json 之后添加事件侦听器

How to add eventlisteners after simple get request json in angularjs?

本文关键字：json 请求 之后 添加 侦听器 事件 获取 简单 angularjs      更新时间：2023-09-26

好的，所以我正在尝试使用Angular，但我遇到了一个问题，也许是因为我还没有采用Angular的思维方式，但这基本上是我遇到的。

我通过 JSON 请求获取一些数据，并使用 ng-repeat 在列表中显示这些数据。目前为止，一切都好。控制台中没有错误，但它不会将事件侦听器附加到 ng-repeat 元素。代码很好，因为对于非 ng 重复元素，它就像一个魅力。其他人遇到了这个问题，您是如何解决的？提前谢谢。

   <div ng-controller="basictrl">
       <h1>Lijst van producten</h1>
        <ul ng-repeat="item in producten">
        <li>{{item.naam}}</li>
        <li>{{item.prijs}}</li>
        </ul>
    </div>

.JS 

    angular.module("app", ['ngRoute'])
      .controller("basictrl", function ($scope, $http, producteffecten) {
         $scope.producten = null;
         $http({
             method: 'GET',
             url: 'producten.json'
         }).
         success(function (data, status, headers, config) {
             $scope.producten = data;
             $scope.showdescription = producteffecten.showdescription; 
         }).error(function (data, status, headers, config) {});

     })
  .factory('producteffecten', function() {
    var effecten = {};
      effecten.showdescription = $('ul').hover(function (){
         $(this).append("<p>Test</p>");
      });
   return effecten;   
  })

简单的答案是：你可以使用 $（'ul'）.on（"hover"，function（）{}）。但这不是棱角分明的思维方式。您可以进行的第一个改进是：

  1. 将 ng-mouseover="muisOverEffectje（）" 添加到 HTML 中的 ul 中
  2. 将 $scope.muisOverEffectje=function（）{ your event code} 添加到角度页面

避免使用 jquery 添加代码以使其更有棱角的下一步可能是这样的：

  1. 添加一个参数，将所选项目提供给事件：muisOverEffectje（item）
  2. 将 ng-show="showDescription" 添加到 ul
  3. 在事件处理程序中将显示说明设置为 true

最后一步可能是： 为你制定指令 .例如，产品组件。

设置超时有效，但我想这很笨拙。我将尝试以更有棱角的方式重写。 

.factory('producteffecten', function() {
        var effecten = {};
    //SETTING TIMEOUT WORKS SOMEHOW
          effecten.showdescription = setTimeout(function() {
              $('ul').hover(function (){
             $(this).append("<p>Test</p>");
          });
          }, 10);
       return effecten;   
      })

你也可以写一个指令。在角度中，哪种方式是做这种事情的最好方法：

目录： 

  <div ng-controller="basictrl">
       <h1>Lijst van producten</h1>
        <ul ng-repeat="item in producten" hover-text="item.effect">
        <li>{{item.naam}}</li>
        <li>{{item.prijs}}</li>
        </ul>
    </div>

.js：

  .controller("basictrl", function ($scope, $http, producteffecten) {
     $scope.producten = null;
     $http({
         method: 'GET',
         url: 'producten.json'
     }).
     success(function (data, status, headers, config) {
         $scope.producten = data;
         $scope.showdescription = producteffecten.showdescription; 
     }).error(function (data, status, headers, config) {});
    })
    .directive("hoverText",function(){
        return {link:function(scope,elem,attr){
            var insertElem=$("<div class='hovertext'>"+scope.hoverText+"</div>")
            elem  .mouseenter(function() {
                    insertElem.appendTo(elem);
              })
              .mouseleave(function() {
                    insertElem.remove();
              });
        },
        scope:{"hoverText":"="}
        };
    });
相关文章：