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

Question

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

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

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

Answer 1

简单的答案是：您可以使用 $('ul').on("hover",function(){})。但这不是 angular 的思维方式。您可以做的第一个改进是：

将 ng-mouseover="muisOverEffectje()" 添加到 html
将 $scope.muisOverEffectje=function(){ 您的事件代码} 添加到 angular 页面

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

添加一个参数，为您的事件提供所选项目：muisOverEffectje(item)
将 ng-show="showDescription" 添加到 ul
在事件处理程序中将 show-description 设置为 true

最后一步可以是：为您制定指令。例如产品组件。

Answer 2

设置超时有效，但我想这有点老套。我将尝试以更 angular 的方式重写。

.factory('producteffecten', function() {
        var effecten = {};
    //SETTING TIMEOUT WORKS SOMEHOW
          effecten.showdescription = setTimeout(function() {

              $('ul').hover(function (){
             $(this).append("<p>Test</p>");
          });

          }, 10);

       return effecten;   
      })

Answer 3

你也可以写一个指令。 angular 中做这种事情的最好方法是什么：

Html:

  <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":"="}
        };
    });

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

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

javascript

json

angularjs

jquery-hover