在angularjs中使用jquery？

我正在研究angularjs，並且我在angularjs中使用jquery。這裏是我的html代碼.....在angularjs中使用jquery？

<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的新手，我嘗試了很多方法來解決這個問題。在這種情況下

來源

2015-04-17 harrini

'packery'是一個JQuery插件嗎？ – Trevor

是的，它是包裝jquery插件.. – harrini

我假設你在https://docs.angularjs.org/api/ng/directive/ngClick

無需描述了jQuery的模板內

在此先感謝...

來源

2015-04-17 08:49:33

感謝您的答覆，但我得到一個錯誤像$是沒有定義。如何在角度使用此代碼.. $（function（）{ var packery = $（'。packery'）。packery（）; console.log（packery）; packery.on（'click '，function（event）{ //刪除點擊元素 packery.packery（'remove'，event.target）; }）; }）; – harrini

這就是爲什麼我說，你是否在文檔頭中包含了jQuery。還要檢查是否沒有使用$。我在編輯我的答案 –

您需要添加指定源路徑的jQuery庫，例如''。這將從jquery的cdn下載文件，但你可以在你的項目中給出本地路徑 – Arkantos

對於你需要一個簡單的點擊事件NG單擊已包括jQyery

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

Fiddle

來源

2015-04-17 08:43:00

如果你想簡單地刪除點擊的元素，使用：

你的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例子。

來源

2015-04-17 11:53:02 FlashyFuddyFuddy

這是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>

來源

2015-04-23 17:32:23 Trevor

在angularjs中使用jquery？

回答

相關問題