如何在控制器外部和视图内在 AngularJs 中运行 jQuery

我正在一个角度种子之上构建一个代码片段库，并使用Jade/Gulp进行编译。目标是在给定页面上拥有可重用代码的工作/实时示例集合的各种类别/页面，用户还可以复制相关的 scss、jade、html 等以用于其他项目（几乎与波旁补充装网站相同 - 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文件中，并让它在我的 angular 应用程序中工作？（我已经尝试过这个，但无济于事）。或者我是否仅限于从控制器内运行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 选择器修改为角度选择器，但这违背了此代码片段库的目的，因为并非所有项目都将在角度应用程序中运行。

对此事的任何见解将不胜感激！