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版本，这里是文档enter link description here

此外，$ element对象已经是一个jquery对象，您应该能够操作该元素，并找到子节点，我们需要查看您的视图是如何定义的，以了解如何应用您的指令

Answer 3

在角度准备好后初始化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/您似乎有点困惑。

您可以在.directive('menuDirective')中实现您的指令，如下所示：

.directive('menu-directive')

不是

<menu-directive></menu-directive>

但是你在你的标记中使用它

<menuDirective></menuDirective>

NOT（你在演示中）

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

Angular会将camelCase转换为破折号分隔字符串，以便在您的标记中使用。

您是如何实施指令的？我可能错了，但它认为您的名称格式不正确，因此您的指令未被应用，因此链接功能未被调用。

我相信角度使用驼峰的情况并将其转换为破折号的单词。

尝试以下方法：

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

然后在你看来

{{1}}

请参阅小提琴：http://jsfiddle.net/mazjfjv4/1/

在angular.js中调用jquery函数

4 个答案: