2014-09-19 17 views
1

所以我试图用mootools来创建一个拖放车,如下所示:demo。我可以得到代码工作得很好,但是当我尝试编辑他们的html看起来像html beloe时,它停止工作。 CSS仍然适用于人们所期望的,ng-repeat之外的div工作正常。不过,我敢肯定,mootools javascript中的.addEvent无法在ng-repeat内找到.item,所以我无法抓住ng-repeat中的任何.item。Mootools .addEvent无法进入ng-repeat?

任何想法?

更新: 好的,看来问题涉及JavaScript中的domready事件。发生火灾时,angularjs尚未加载。我尝试了加载事件,但这也在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> 

回答

1

取决于你如何连接的拖拽元素。事情是,在ng-repeat通过$scope.$apply等生命周期呈现应用程序的这部分之前,这些元素将不会在那里。

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

此外,如果集合更改,mootools将不知道添加新的点击处理程序。

你不希望等待内容改变和重新应用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 
}); 

只要角度不决定重新渲染div#items事件代表(如上通过中继)将正常工作,由于任何呈现您的应用程序的一部分。如果是这样,它会破坏保存的事件。这也意味着你需要首先能够看到这个元素,通过mootools绑定到它。

您可能希望将事件绑定到NG-应用DIV是安全的,并委托给此方法:

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