在angularjs中使用jquery？答案

【问题标题】：using jquery in angularjs?在angularjs中使用jquery？
【发布时间】：2015-04-17 08:35:37
【问题描述】：

我正在研究 angularjs，我对使用 jquery 和 angularjs 感到震惊。这是我的html代码.....

 <div class="packery ">
  <div class="item"></div>
  <div class="item h4"></div>
  <div class="item w2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h2"></div>
  <div class="item"></div>
  <div class="item w4"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h4"></div>
  <div class="item w2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h2"></div>
  <div class="item"></div>
  <div class="item w4"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2"></div>
  <div class="item"></div>
</div>

这是我的js代码............

$( function() {


  var packery = $('.packery').packery();

  console.log(packery);

  packery.on( 'click', function( event ) {
    // remove clicked element
    packery.packery( 'remove', event.target );
  });
});

请帮助我将此 jquery 代码转换为在 angularjs 中工作。我是 jquery 新手，我尝试了很多方法来解决这个问题。

提前谢谢...

【问题讨论】：

packery 是一个 JQuery 插件吗？
是的，它是 packery jquery 插件..

标签： jquery html angularjs

【解决方案1】：

我假设你已经包含了 jQyery

       $.noConflict();
       jQuery(function() {
           jQuery('.packery').on('click',function(){
              jQuery(this).remove();
           });
       });

Fiddle

【讨论】：

感谢您的回复，但我收到一个错误，例如 $ 未定义。如何在角度中使用此代码.. $( function() { var packery = $('.packery').packery(); console.log(packery); packery.on( 'click', function( event ) { // 移除点击的元素 packery.packery( 'remove', event.target ); }); });
这就是为什么我说，你是否在文档头中包含了 jQuery。还要检查 $ 是否未使用。我正在编辑我的答案
您需要添加指定源路径的 jQuery 库，例如 <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>。这将从 jquery 的 cdn 下载文件，但您可以在项目中提供本地路径

【解决方案2】：

对于简单的点击事件，您需要在https://docs.angularjs.org/api/ng/directive/ngClick 中描述的模板中进行 ng-click

在这种情况下不需要 jQuery

【讨论】：

【解决方案3】：

如果你想简单地移除被点击的元素，使用这个：

您的 HTML：

<div class="packery">
   <div class="item" data-ng-click="remove($event)"></div>
   <div class="item h4" data-ng-click="remove($event)"></div>
   .......
</div>

你的控制器：

function myController( $scope ){
   $scope.remove=function($event){ 
       $event.target.remove();    
  }       
}

查看我们的 Fiddle 示例。

【讨论】：

【解决方案4】：

这是 Angular 指令的一个很好的用例。您可以使用 html 属性来指定应将 jQuery 插件应用于哪个元素：

angular.module("mymod")
.directive("packery", function(){
  return {
    link: function(scope, element, attrs) {
      $('[packery]').packery().on('click', function(event){
        $(element).packery('remove', event.target);
      });
    }
  }
});

然后，当您希望将此 jQuery 插件应用于元素时，您只需为该元素赋予 packery 属性：

<div packery>...</div>

【讨论】：