Question

我使用Angular指令动态添加元素：

.directive('myNote',  function () {
    return {
        restrict:'E',
        scope:{
            delete: '&',
            note:'='
        },
        controller: function()
        {
            this.delete = function(){

            $('my-note').remove();
        };
        },
        controllerAs: 'noteCtrl',
        link:function (scope, element, attrs) {
            var $el = $(element);
            $el.draggable();
        },
        template: '<div class="note yellow" id={{note.id}}>' +                 
                  '<img ng-src="close.png" align="right" ng-click="noteCtrl.delete()">' +
                  '<br>'+
                  '<blockquote>'+
                  '<cite class="title">{{note.title}}</cite> <br><br> {{note.content}}' +
                  '</blockquote>' +             
                  '</div>'
    };
})

这样，每次添加my-note时，div都会被添加为div id = 1，div id = 2等等。当我点击div的img标签时，我想删除一个特定的音符。我怎样才能做到这一点？

P.S：$（＆＃39; my-note＆＃39;）。remove（）;删除所有笔记。我只想删除我点击的笔记。

以下是请求的HTML：

<ul>
 <li ng-repeat="note in notes">
  <my-note note="note" delete="deleteNote(note)"></my-note>
 </li>
</ul>

Answer 1

不要使用内联onclick=处理程序。使用委托事件处理程序（附加到不变的祖先元素）执行“jQuery方式”：

首先，在图像按钮中添加一个类（并删除onclick处理程序）：

 '<div class="note yellow" id={{note.id}}>' +                 
              '<img ng-src="close.png" align="right" class="deleteme">' +
              '<br>'+
              '<blockquote>'+
              '<cite class="title">{{note.title}}</cite> <br><br> {{note.content}}' +
              '</blockquote>' +             
              '</div>'

然后将委托事件处理程序添加到共同的祖先：

$(document).on('click', '.deleteme', function(){
   $(this).closest('.note').remove();
});

处理程序的this将是图像/按钮，因此您只需使用closest()找到要删除的项目。在你的情况下，这是class="note"的元素。

说明：

委派的事件处理程序通过监听事件（单击）来冒泡到共同的祖先。如果没有其他更接近/方便的话，document是最好的默认值。然后，他们在事件时将jQuery选择器应用于bubble-chain中的元素。然后它将您的函数应用于仅导致事件的匹配元素。传递给事件函数的this值将是单击的匹配项。
内联处理程序（如onclick=""）将您的事件注册与事件处理程序分开，没有任何好处。
您应该尝试选择最接近的共同祖先作为委托事件的目标元素。即使document高一级，但默认优于body，因为body在某些情况下可能会失败。
委派事件的连接速度比单个事件处理程序快。权衡是在事件发生时速度略有下降但是（并且它很大但是），事件时间的速度差异永远不会被注意到，因为你不能每秒点击一次鼠标50,0000次：）

更新（基于添加的HTML）：

由于您拥有备注的父UL，因此请将您的HTML更改为UL上的ID并定位：

e.g。

<ul id="mynotes">
 <li ng-repeat="note in notes">
  <my-note note="note" delete="deleteNote(note)"></my-note>
 </li>
</ul>

然后代码变成

$('#mynotes').on('click', '.deleteme', function(){
   $(this).closest('.note').remove();
});

删除具有特定id的元素..其中我的id来自角度表达式

1 个答案:

说明：

更新（基于添加的HTML）：