Question

所以我正在尝试使用mootools来创建一个拖放车，如下所示：demo。我可以让代码工作得很好，但当我尝试编辑他们的html看起来像html beloe时，它停止工作。 css仍然适用于人们期望的，并且ng-repeat之外的div工作正常。但是，我很确定mootools javascript中的.addEvent无法在ng-repeat中“找到”.item，因此我无法在ng-repeat中获取任何.items。

有什么想法吗？

更新：好的，似乎问题涉及javascript中的domready事件。当发射时，angularjs没有加载。我尝试了load事件，但这也会在angularjs加载之前触发。事件的其他想法？我现在正在使用mousedown，但这意味着您必须先单击其中一个图像才能开始拖动它们，这不是最佳选择。此外，mousedown事件似乎有时会在购物车中出现奇怪的副本，所以我需要找到一个更好的方法。

<div id="items">
    <div class="item">
        <p>test</p>
    </div>
  <div ng-repeat="post in posts">

    <div class="item">
        <img class="picImage" src="/static/imgs/{{post.picture}}" alt="Smiley face" height="128" width="128">
        <p>Shirt 1</p>
    </div>
  </div>
</div>

Answer 1

取决于您如何附加可拖动物。事实上，在ng-repeat渲染应用程序的这一部分的$scope.$apply等生命周期之前，这些元素不会存在。

// this code is wrong. 
$$('.item').addEvent('mousedown', function(event){
    event.stop();
... 
});

另外，如果收藏品发生变化，mootools就不会知道添加新的点击处理程序。

你不想通过ng和重新应用mootools事件来等待内容更改，这不是一个好主意。

你可以使用：https://docs.angularjs.org/api/ng/directive/ngMousedown将事件绑定到集合元素，添加$scope.onMouseDown并在那里移动逻辑，让角度在内部处理它：

<div ng-repeat="post in posts">
    <div class="item" ng-mousedown="onMouseDown($event, post, $index)">
        <img class="picImage" src="/static/imgs/{{post.picture}}" alt="Smiley face" height="128" width="128">
        <p>Shirt 1</p>
    </div>
</div>

类似

$scope.onMouseDown = function($event, post, $index){
   // clone and do stuff


   // if you want to disable stuff, modify `post` etc, potentially can do $scope.$digest / $apply ...
};

...或者你可以像这样使用事件委托和绑定：

$('items').addEvent('mousedown:relay(.items)', function(event){ 

    // ... do normal logic but no access to ng model here. can get dirty
});

事件委托（如上所述通过中继）将正常工作，只要angular不会因为呈现应用程序的那部分而重新呈现div#items。如果是，它将破坏已保存的事件。它还意味着你需要能够首先看到这个元素通过mootools绑定到它。

您可能希望将事件绑定到ng-app div以保证安全并委托给此人：

document.getElement('[ng-app]').addEvent('mousedown:relay(#items div.items)', fn);

Answer 2

您是否尝试过挂钩$ viewContentLoaded事件？

他们在这里谈论它： AngularJs event to call after content is loaded

Mootools .addEvent无法进入ng-repeat？

2 个答案: