在angular.js中調用jquery函數

Question

我想在我的角度應用程序中使用此菜單http://tympanus.net/Development/ResponsiveMultiLevelMenu/但我現在不怎么用角度調用jquery腳本，但是我已經搜索了一下，但沒有任何適合我的方法。 我在這樣的指令中有調用腳本

appDirectives.directive('menu-directive', function() {
    return {
        restrict: 'EA',
        link: function ($scope, $elem, attrs) {
        $( '#dl-menu' ).dlmenu();
    }
    };
}); 

但不是為我工作。

原始腳本是這個

<script>
            $(function() {
                $( '#dl-menu' ).dlmenu();
            });
        </script>

請幫忙。

Answer 1

如果要在具有指令的元素中執行jQuery函數，則必須執行以下操作：

link: function ($scope, $elem, attrs) {
   $elem.dlmenu();
}

編輯：我已經編輯了代碼

Answer 2

默認情況下，angular使用名為jqlite的jquery版本，這是文檔，請在此處輸入鏈接描述

同樣，$ element對象已經是一個jquery對象，您應該能夠操縱該元素並找到子節點，我們需要查看如何定義視圖以了解如何應用指令

Answer 3

angular准備好后初始化jquery插件。

appDirectives.directive('menu-directive', function($timeout) {
  return {
    restrict: 'EA',
    link: function ($scope, $elem, attrs) {
      $timeout(function() {
        $('#dl-menu').dlmenu();
      }, 0);
    }
  };
});

Answer 4

編輯：按照您在@CarlosMayo答案中的評論以及您在他的答案中發布的現場演示： http ://1stfold.com/taskbox/dev/POS/angular/#/app/scan/您似乎有些困惑。

您可以像這樣在javascript實現指令：

.directive('menuDirective')

不

.directive('menu-directive')

但是您可以在標記中使用它，例如

<menu-directive></menu-directive>

不（您在演示中）

<menuDirective></menuDirective>

Angular會將camelCase轉換為短划線分隔的字符串，以供您在標記中使用。

---

您如何執行指令？ 我可能是錯的，但它認為您的名稱格式錯誤，因此未應用您的指令，因此未調用鏈接函數。

我相信有角度的使用駝峰大小寫並將其轉換為破折號分隔的單詞。

請嘗試以下操作：

appDirectives.directive('menuDirective', function() {
    return {
        restrict: 'EA',
        link: function ($scope, $elem, attrs) {
        $elem.dlmenu();
    }
    };
}); 

然后在您看來

<menu-directive></menu-directive>
<!--or-->
<div menu-directive></dive>

看到小提琴： http : //jsfiddle.net/mazjfjv4/1/