如何在自定义指令中封装jQuery代码

JQuery does not grab the ng-repeat elements

Hi I am trying to make drag and drop and the problem is that JQuery does not grab the ng-repeat elements. If I add the item statically it works, but if the item came out of the loop it no longer works.

嗨，我试图拖放，问题是JQuery没有抓住ng-repeat元素。如果我静态添加项目，它可以工作，但如果项目从循环中出来它不再有效。

index.js

index.js

<div ng-repeat="list in lists">
  <div class="column">
    <div class="portlet">
      <div class="portlet-header">Feeds</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
  </div>
</div>

<div class="column">
  <div class="portlet">
    <div class="portlet-header">Feeds</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
</div>

<script src="/javascripts/draganddrop.js"></script>
</body>
</html>

drag and drop script:

拖放脚本：

https://gist.github.com/anonymous/a571165b46a1a86a6ec34adabe1f928f

https://gist.github.com/anonymous/a571165b46a1a86a6ec34adabe1f928f

1 个解决方案

#1

How to Encapsulate jQuery code in a Custom Directive

Any jQuery code that manipulates the DOM should be encapsulated in a custom directive so that it is executed when the AngularJS framework ng-repeat directive instantiates the element.

任何操作DOM的jQuery代码都应该封装在一个自定义指令中，以便在AngularJS框架ng-repeat指令实例化该元素时执行它。

<div ng-repeat="list in lists">
  <div class="column" custom-directive>
    <div class="portlet">
      <div class="portlet-header">Feeds</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
  </div>
</div>

app.directive("customDirective", function() {
    return {
        link: postLink
    };

    function postLink(scope, elem, attrs) {
        ̶$̶(̶"̶.̶c̶o̶l̶u̶m̶n̶"̶)̶.̶  ͟e͟l͟e͟m͟.sortable({
          connectWith: ".column",
          handle: ".portlet-header",
          cancel: ".portlet-toggle",
          start: function (event, ui) {
            ui.item.addClass('tilt');
            tilt_direction(ui.item);
          },
          stop: function (event, ui) {
            ui.item.removeClass("tilt");
            $("html").unbind('mousemove', ui.item.data("move_handler"));
            ui.item.removeData("move_handler");
          }
        });

        scope.$on("$destroy", function() {
            //perform any necessary cleanup here
        }); 
    }
});

By encapsulating the jQuery code in a custom directive, the ng-repeat directive will execute it when it instantiates each element. The $destroy code will be executed when ngRepeat removes the element from the DOM.

通过将jQuery代码封装在自定义指令中，ng-repeat指令将在实例化每个元素时执行它。当ngRepeat从DOM中删除元素时，将执行$ destroy代码。

To use jQuery in AngularJS directives, simply ensure it is loaded before the angular.js file.

要在AngularJS指令中使用jQuery，只需确保在angular.js文件之前加载它。

---

From the Docs:

来自Docs：

scope.$destroy();

Removes the current scope (and all of its children) from the parent scope. Removal implies that calls to $digest() will no longer propagate to the current scope and its children. Removal also implies that the current scope is eligible for garbage collection.

从父作用域中删除当前作用域（及其所有子作用域）。删除意味着对$ digest（）的调用将不再传播到当前范围及其子节点。删除还意味着当前范围符合垃圾收集的条件。

The $destroy() is usually used by directives such as ngRepeat for managing the unrolling of the loop.

$ destroy（）通常由诸如ngRepeat之类的指令用于管理循环的展开。

Just before a scope is destroyed, a $destroy event is broadcast on this scope. Application code can register a $destroy event handler that will give it a chance to perform any necessary cleanup.

在范围被销毁之前，在此范围内广播$ destroy事件。应用程序代码可以注册$ destroy事件处理程序，使其有机会执行任何必要的清理。

Note that, in AngularJS, there is also a $destroy jQuery event, which can be used to clean up DOM bindings before an element is removed from the DOM.

请注意，在AngularJS中，还有一个$ destroy jQuery事件，可以在从DOM中删除元素之前清除DOM绑定。

— AngularJS $rootScope/$scope API Reference - $destroy

- AngularJS $ rootScope / $ scope API参考 - $ destroy