javascript - 如何在 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 思维方式。您可以做的第一个改进是:

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

避免使用 jquery 添加代码以使其更 Angular 下一步可能是这样的:

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

最后一步可能是:为您制定指令。例如，就像产品组件一样。