AngularJS 指令没有执行 Jquery-ui 菜单

Question

我正在尝试让 jquery-ui 菜单在 AngularJS 指令中工作。

我已经尝试了this fiddle，并举了一个我正在尝试做的例子。

html：

<div ng-app="myApp" ng-controller="mainController">
  <ul j-menu>
    <li>Test 1</li>
    <li>Test 2</li>
  </ul>
</div>

js：

var myapp = angular.module("myApp", []);

myapp.directive("jMenu", function() {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      $(element).menu();
    }
  }
});

myapp.controller("mainController", ['$scope', function($scope) {}]);

最令人困惑的是，我有 modified another 'working' fiddle 来做我想做的事，但不能在我自己的小提琴或我自己的开发环境中复制。

我错过了什么？！

Answer 1

jsfiddle 使用 AngularJS 处理外部资源的方式似乎存在问题，它不断在控制台中注销$injector 错误。我已将外部资源复制并粘贴到 plunker 中，其他所有内容都在您的第一个小提琴中，它的工作原理与预期的一样。

DEMO

注意：由于您添加了 jquery，所有 angular 元素也是 jquery 元素。因此，通过这样处理元素，您可以这样做：

而不是

$(element).menu()

你可以这样做

element.menu()

更新：

正如Ali 所指出的那样，JSFiddle 可以选择将javascript 设置中的Load Type 更改为No wrap - in <body，该设置位于javascript textarea 的右上角。

DEMO