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

我正在一个有角度的种子上构建一个代码片段库，并使用Jade/Gulp进行编译。目标是在给定页面上拥有各种类别/页面的可重用代码的工作/活动示例集合，用户还可以复制相关的SCS、jade、html等用于其他项目（几乎与Bourbon Refills网站相同-）

我使用jade mixin在分类页面上呈现每个片段

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>

}))

导入说明-我可以通过手动将JS放置在控制器中并将所有jQuery选择器修改为angular选择器，从而使JS在代码段中工作，但这违背了此代码段库的目的，因为并非所有项目都将在angular应用程序中运行

---

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

我混合使用了这两种方法，唯一的要求是按以下顺序加载脚本：

<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
//流和动画我的脚本
//安格拉斯
//AngularJS全屏
//…控制器\u用于\u AngularJS

---

angular和jQuery之间的所有交互都是在文档DOM状态（视图状态；）

原则上很简单，您可以将

angular.element

分配给全局

$

，这就是您所需要的：

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

window.$=angular.element；
$（'somediv'）.html（'ipsum-lorem
'）；

然而，Angular只包含一个称为jqLite的严格中性版本的jQuery，这不适用于您的代码，因为它不支持（除其他外）通过查询选择器进行选择。上面的代码只会抛出：

未捕获错误：[jqLite:nosel]

在浏览器Javascript控制台上。但是有一个

$（document）.ready（）

，您可以使用它

为了说明这一点，我将一个示例放在一起，其中有两个

，一个由Angular绑定，另一个由jQuery填充（这永远不会发生，因为

$（document）.ready（）

记录到控制台，以便您可以看到它受支持

---

现在，我通常在我的项目中使用CDN中的完整jQuery。对于大多数访问者来说，这是一个HTTP状态

304

，它比jqLite有用得多，即使我自己也不尝试操作DOM。

根本不清楚这些与angular的关系。它只是构建在angular之上，我想我可以包括我的索引文件，但不确定还应该包括哪些内容会有所帮助，关键是不清楚代码片段的html是如何插入DOM的。“建在棱角之上”有些毫无意义。。。。通常是解决重大问题的方法。至于把代码放在控制器里，那肯定是不对的。。。规范是使用指令这与OP运行所示代码有什么关系？可能jQuery已经包含在页面中，或者会出现

$notdefined

错误。我尝试将angular.element分配给全局“$”，但没有这样做。感谢您提供有关使用完整版本jQuery的提示，因为我以前没有这样做。使用以下代码片段可以在单独的javascript文件中工作：

angular.element（document.ready（函数（）{alert（'your clicked a tab！'）；}）但使用：
angular.element（document）.ready（函数（）{window.$=angular.element；$（'.tab link'）。单击（函数（）{alert（'your clicked a tab！'）；}）；}）不起作用..是的，正如我在上面写的：“Angular只包含一个称为jqLite的严格中性版本的jQuery，这对代码不起作用，因为它不支持（除其他外）通过查询选择器进行选择”。获取
$（'.tab link'）最简单的方法。单击（）
工作是通过完整的jQuery。是的，我已经包含了完整版本的jQuery，但它仍然不能按预期工作。我尝试过处理angular和jQuery相关元素的加载顺序（在angular/angular-based脚本之前先使用jQuery），没有骰子：
window.$ = angular.element;
$('#somediv').html('<p>ipsum lorem</p>');