Mootools .addEvent无法进入ng-repeat？

  • Z时代
  • 2024-01-10
  • 分类：问答

所以我试图用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>

回答：

取决于你如何连接的拖拽元素。事情是，在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);

回答：

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

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

以上是 Mootools .addEvent无法进入ng-repeat？ 的全部内容， 来源链接： utcz.com/qa/261127.html

回到顶部