CODEWITHSUNDEEP
jqueryangularjsjquery-uiangularjs-directive
g19fanatic
g19fanatic

Reputation: 10931

AngularJS Directive isn't executing Jquery-ui menu

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?!

Upvotes: 3

Views: 154

Answers (1)

ryeballar
ryeballar

Reputation: 30098

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

Upvotes: 4

Related Questions