Как я могу запустить jQuery в AngularJs вне контроллера и внутри представления?

Question

Я строю библиотеку фрагмента кода на вершине углового семени и компилирую с использованием Jade/Gulp. Цель состоит в том, чтобы иметь различные категории/страницы коллекций рабочих/живых примеров многоразового кода на данной странице, где пользователь также может копировать соответствующие scss, jade, html и т. Д. Для использования в других проектах (почти идентичный сайту Bourbon Refills - http://refills.bourbon.io/)

Я использую смесь нефрита для отображения каждого фрагмента на страницах категорий.

mixin snippet(category, title, url) 
.snippet-container 

    // Title of Snippet 

    // Snippet Markup (HTML) 

    .snippet-markup(ng-include="'app/snippets/#{category}/#{url}/markup.html'") 

// Snippet Copy Table/Raw Resources 

.refill-snippet 
    .refill-control 
     a.snippet-link-toggle(ng-click="showSnippet-!{url}=true" ng-hide="showSnippet-!{url}") Show Code 
     a.snippet-link-toggle(ng-click="showSnippet-!{url}=false" ng-show="showSnippet-!{url}") Hide Code 
    table.snippets-table(ng-show="showSnippet-!{url}") 
     tbody 
      tr 
       // Markup Column HTML/Jade 
       td.snippet 
        .copy-source-container 
         a.copy-source(ngclipboard='', data-clipboard-target='#jade') Copy Jade 
        pre.language-markup 
         code#jade.language-jade(prism ng-include="'master/snippets/#{category}/#{url}/_jade.html'") 

       // Styles Column SCSS,SASS/LESS/CSS 
       td.snippet 
        .copy-source-container 
         a.copy-source(ngclipboard='', data-clipboard-target='#scss') Copy Scss 
        pre.language-markup 
         code#scss.language-sass(prism ng-include="'master/snippets/#{category}/#{url}/_scss.scss'") 

       // Scripts Column Javascript, jQuery, CoffeeScript 
       td.snippet 
        .copy-source-container 
         a.copy-source(ngclipboard='', data-clipboard-target='#js-1') Copy JavaScript 
        pre.language-markup 
         code#js-1.language-javascript(prism ng-include="'master/snippets/#{category}/#{url}/_js.js'") 

А затем ссылается каждый фрагмент на данной точки зрения категории как таковой:

include mixins 

раздел

// Tabs 1 
+snippet('accordions-tabs', 'Accordions 1', 'tabs-1') 
// Tabs 2 
+snippet('accordions-tabs', 'Accordions 2', 'tabs-2') 

Проблема/препятствие я пытаюсь преодолеть это получение JavaScript/JQuery для каждого фрагмента, который должен выполняться на странице. Есть ли способ включить все JS, необходимые для фрагментов в один файл .js, и заставить его работать в моем угловом приложении? (Я пробовал это, но безрезультатно). Или Am i ограничивается запуском javascript/jQuery только внутри контроллера, и мне нужно найти способ передать JS из шаблона/представления в контроллер?

Ниже приведен пример разметки для фрагмента:

<ul class="accordion-tabs"> 
<li class="tab-header-and-content"></li> 
<a href="javascript:void(0)" class="is-active tab-link">Tab Item</a> 
<div class="tab-content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit 
     dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien 
     purus 
     suscipit odio, quis dictum 
     odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt 
     molestie 
     sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. 
     Nullam 
     imperdiet sapien id 
     purus pretium id aliquam mi ullamcorper.</p> 
</div> 
<li class="tab-header-and-content"></li> 
<a href="javascript:void(0)" class="tab-link">Another Tab</a> 
<div class="tab-content"> 
    <p>Ut laoreet augue et neque pretium non sagittis nibh pulvinar. Etiam ornare tincidunt orci quis ultrices. 
     Pellentesque ac sapien ac purus gravida ullamcorper. Duis rhoncus sodales lacus, vitae adipiscing tellus 
     pharetra sed. Praesent bibendum 
     lacus quis metus condimentum ac accumsan orci vulputate. Aenean fringilla massa vitae metus facilisis 
     congue. Morbi placerat eros ac sapien semper pulvinar. Vestibulum facilisis, ligula a molestie venenatis, 
     metus justo ullamcorper ipsum, congue 
     aliquet dolor tortor eu neque. Sed imperdiet, nibh ut vestibulum tempor, nibh dui volutpat lacus, vel 
     gravida magna justo sit amet quam. Quisque tincidunt ligula at nisl imperdiet sagittis. Morbi rutrum tempor 
     arcu, non ultrices sem semper a. Aliquam 
     quis sem mi.</p> 
</div> 
<li class="tab-header-and-content"></li> 
<a href="javascript:void(0)" class="tab-link">Third</a> 
<div class="tab-content"> 
    <p>Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum 
     in, porttitor ut sapien. Phasellus tempor lorem id justo ornare tincidunt. Nulla faucibus, purus eu placerat 
     fermentum, velit mi iaculis 
     nunc, bibendum tincidunt ipsum justo eu mauris. Nulla facilisi. Vestibulum vel lectus ac purus tempus 
     suscipit nec sit amet eros. Nullam fringilla, enim eu lobortis dapibus, quam magna tincidunt nibh, sit amet 
     imperdiet dolor justo congue turpis.</p></div> 
<li class="tab-header-and-content"></li> 
<a href="javascript:void(0)" class="tab-link">Last Item</a> 
<div class="tab-content"> 
    <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus dui urna...</p> 
</div> 

А требуется JQuery:

$(document).ready(function() { 
$('.accordion-tabs').each(function (index) { 
    $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show(); 
}); 
$('.accordion-tabs').on('click', 'li > a.tab-link', function (event) { 
    if (!$(this).hasClass('is-active')) { 
     event.preventDefault(); 
     var accordionTabs = $(this).closest('.accordion-tabs'); 
     accordionTabs.find('.is-open').removeClass('is-open').hide(); 

     $(this).next().toggleClass('is-open').toggle(); 
     accordionTabs.find('.is-active').removeClass('is-active'); 
     $(this).addClass('is-active'); 
    } else { 
     event.preventDefault(); 
    } 
}); 

});

Импорт заметки - я могу сделать работу JS для фрагмента, вручную помещая его в контроллер и модифицировать все селекторы jQuery для угловых селекторов, но это побеждает цель этой библиотеки фрагментов, поскольку не все проекты будут выполняться в угловое приложение.

Любое понимание по этому вопросу было бы рад!

Answer 1

Я сделал смесь из двух и единственным требованием было, чтобы загрузить сценарии в следующем порядке:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">//jQuery</script> 
<script type="text/javascript" src="script/jQuery.js">//Flow and animations my script</script> 
<script src="script/lib/angular.min.js">//AngularJS</script> 
<script src="script/lib/angular-fullscreen.js">//AngularJS-fullscreen</script> 
<script src="script/menuContent.js">//...Controller_for_AngularJS</script> 

все взаимодействие между угловым и JQuery делается верно состояние документа DOM (вид состояния;))

Answer 2

в принципе, это легко, вы можете просто присвоить angular.element к глобальному $, и это все, что вам нужно:

window.$ = angular.element; 
$('#somediv').html('<p>ipsum lorem</p>'); 

Однако, Угловая содержит только строго кастрированную версию jQuery, называемую jqLite, и это не будет работать с вашим кодом, поскольку он не поддерживает (помимо прочего) выбор с помощью селекторов запросов. Вышеупомянутый код будет только кидать:

Uncaught Error: [jqLite:nosel] http://errors.angularjs.org/1.4.0/jqLite/nosel

в браузере Javascript console. Однако есть $(document).ready(), и вы можете использовать его.

Чтобы проиллюстрировать это, я поставил вместе JSBin пример, который имеет два <div>, один связан Угловое, один будет заполнен Jquery (что никогда не происходит из-за "nosel" no selector error).

$(document).ready() Журналы на консоль, поэтому вы можете видеть, что она поддерживается.

Теперь, как правило, я использую полный jQuery из CDN вместе с Angular в моих проектах. Для большинства посетителей это HTTP-статус 304, и это более полезно, чем jqLite, хотя я стараюсь не манипулировать DOM самостоятельно.