javascript - AngularJS ngRoute subview 未在父 View 中加载 Javascript

Question

当尝试使用 Angular 自定义元素时，我制定了不同的路线，并且它们都有效。问题是某些自定义元素无法加载。

我有一个页面使用 Angular Route 来处理不同的 View ，如下所示:

angular.module("appRoutes", ["ngRoute"])

    .config(function($routeProvider, $locationProvider) {

            $routeProvider

                // Route for the home page
                .when("/", {
                    templateUrl  : "../views/home.html",
                    controller   : "homeController",
                    controllerAs : "home"
                })

                // Route for Credits
                .when("/credits", {
                    templateUrl  : "../views/credits.html",
                    controller   : "creditsController",
                    controllerAs : "credits"

                });

            $locationProvider.html5Mode(true);

    });

所有的 CSS 和 JS 文件都在 index.html 文件中调用。文件开头的CSS，index.html文件结尾的JS。我尝试将 JS 导入移动到文件的顶部，但这并没有改变任何东西。

我尝试使用的自定义元素是 Slider Revolution 和 Owl Carousel。当我将 home.html 的内容直接放入 index.html 时，一切正常。

但是，当我尝试将 home.html 的内容保留在 home.html 中并仅使用我的 View 加载内容时。 Revolution Slider 和 Owl Carousel 中的元素将无法工作，图像无法加载，它们的“骨架”也无法工作。

此外，我尝试将 CSS 和 JS 文件导入放置在 home.html View 中，但这也不起作用。

我不知道如何修复它。我认为 Owl Carousel 和 Revolution Slider 的 Javascript 存在某种问题，无法与 home.html 内部的 View 进行交互，因为 CSS 通常可以正常工作。

感谢您花时间阅读所有这些内容，非常感谢您提供的任何帮助。

Answer 1

使用 angular-ui-router 有一个非常相似的问题。 CSS 应用正常，但 JS 什么也没做。无论我在哪里加载它；在索引页或我的主页中枯萎。 ng-view/ui-view 是否充当命名空间？那和 DOM 加载顺序是我能想到的唯一会导致这种效果的东西。如果我在这里找到解决方案，我会发布

::解决方案::

所以我让它工作了。您需要延迟加载您的第 3 方 JS 文件。查看此处发布的答案(第一个)

Why ng-scope is added to javascript inline of my partial view and makes alert not working?

他们唯一没有提到的部分是您要应用到 View 的脚本需要添加到 View 中:

<div ng-view>  
    <script type=text/javascript-lazy src="your/src/path"></script>
</div>

ngLazyLoad 会将其从 View 中删除，并在适当的时候将其添加到您的头部，这会影响加载到您 View 中的内容。