2015-12-11 3 views
3

Я пытаюсь получить меню jquery-ui для работы внутри директивы AngularJS.Директива AngularJS не выполняется JQuery-ui menu

Я пробовал 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 делать именно то, что я хочу сделать, но не может повторяться в моей собственной скрипке или в моем собственном dev env.

Что мне не хватает ?!

+0

отсутствует 'объем: {}'? –

ответ

4

Похоже, что существует проблема с тем, как jsfiddle обрабатывает внешний ресурс с помощью AngularJS, он устраняет ошибки в консоли $injector. Я скопировал и вставил внешние ресурсы в plunker и все остальное в вашей первой скрипке, и это работает так же, как и должно быть.

DEMO

Примечание: Так как вы добавили JQuery, все угловые элементы также JQuery элементы. Таким образом, рассматривая элементы, как, например вы можете сделать это:

вместо

$(element).menu() 

вы можете сделать это

element.menu() 

Обновление:

Как то, что Ali отметил, JSFiddle имеет возможность изменить Load Type на No wrap - in <body в настройках javascript, расположенных по адресу javascript в правом верхнем углу.

DEMO

+0

Очень интересная находка. Посмотрев на вывод моего консольного окна на мою настройку dev, я увидел некоторые ошибки, которые, как я думал, были «нормальными». Исправив их, мое местное решение также работало. Благодаря! – g19fanatic

+2

Нет проблемы с jsfiddle. Просто измените тип загрузки в области javascript на 'No wrap - в ' и он будет работать. – Ali

+0

Спасибо @ Али, что очень информативно – ryeballar

Смежные вопросы