AngularJS Directive isn't executing Jquery-ui menu

Question

I'm trying to get a jquery-ui menu to work inside an AngularJS directive.

I have tried this fiddle with an example of what I'm trying to do.

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) {}]);

The most perplexing piece is that I have modified another 'working' fiddle to do exactly what I want to do but cannot replicate in my own fiddle nor in my own dev env.

What am I missing?!

missing scope: {} ?

Bhojendra Rauniyar
– Bhojendra Rauniyar

2015-12-11 05:51:11 +00:00
Commented Dec 11, 2015 at 5:51 — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Dec 11, 2015 at 5:51

Community · Accepted Answer · 2017-05-23 12:07:23Z

4

It seems that there's a problem with how jsfiddle is handling external resource with AngularJS, it keeps logging out $injector errors in the console. I've copied and pasted the external resources in a plunker and everything else in your first fiddle and it works just as how its supposed to be.

DEMO

Note: Since you've added jquery, all angular elements are also jquery elements. So by treating elements as such you can do this:

instead of

$(element).menu()

you can do this

element.menu()

Update:

As what Ali pointed out, JSFiddle has the option to change the Load Type to No wrap - in <body in the javascript settings located at the javascript textarea's top-right corner.

DEMO

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Dec 11, 2015 at 6:11

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

g19fanatic Over a year ago

Very interesting find. After looking at my console window's output on my dev setup, I saw some errors that I thought were 'normal'. After correcting them, my local solution also worked. Thanks!

Ali Over a year ago

There is no issue with jsfiddle. Just change the load type in the javascript area to No wrap - in <body> and it will work.

Collectives™ on Stack Overflow

AngularJS Directive isn't executing Jquery-ui menu

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related