javascript - 不使用 Javascript 库的 AngularJS 部分 View

Question

我有一个问题，我根本无法解决问题。我无法让我的第 3 方 Javascript 文件在我的 View 中运行(尽管在不使用 ng-view 时运行良好。示例如下

Index.html

    <main class="page-content" ng-controller="ViewController">
        <div ng-view ng-cloak class="ng-cloak page-content-view"></div>
    </main>
    <script  src="http://vjs.zencdn.net/4.11/video.js"></script>
    <script src="/javascripts/app.js"></script>

partial.html

    <video ng-cloak 
           class="ng-cloak video-js vjs-default-skin"
           controls preload="auto" width="auto" height="auto"
           data-setup='{"example_option":true}'>
       <source src='{{video.src}}' type='video/mp4' />
    </video>

路由工作正常。我还有其他示例以及不同的 Javascript 文件。

我尝试将 Javascript 文件直接加载到 partial.html 中，但没有区别。

我使用的是 angularjs 版本 v1.3.8。

谢谢

Answer 1

由于大多数第三方脚本的工作方式以及 Angular 修改 DOM 的方式，您需要使用指令来包装操作 DOM 的第三方组件(通常快速谷歌搜索会找到任何流行的 JS 库的指令)。如果第三方库与 moment.js 或 lodash 等数据操作有关，您通常可以将它们包含在您的 index.html 中并在您的 Angular JS 代码中使用它们，但在大多数情况下，有人已经编写过或者您可以编写一个该代码的包装器以及 Angular 提供者的形式(服务/工厂都是提供者)。

长话短说，当来自第三方的 JS 正在运行时，您的部分内容不在文档中的“正确”时间。通过指令，您可以指示 Angular 何时加载/编译某些模板并编译您的指令，它应该在应用该指令的元素上执行该第三方代码。