AngularJS ngRoute 子视图未在父视图中加载 Javascript

Question

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

我有一个页面使用 Angular 路由来处理不同的视图，如下所示：

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 内并使用我的视图加载内容时。 Revolution Slider 和 Owl Carousel 中的元素将无法工作，图像无法加载，两者的 "skeleton" 也无法工作。

此外，我尝试将 CSS 和 JS 文件导入放置在 home.html 视图中，但也没有用。

我不知道如何修复它。我想这是 Javascript 的某种问题，因为 Owl Carousel 和 Revolution Slider 无法与 home.html 内部的视图交互，因为 CSS 通常可以正常工作没有问题。

感谢您花时间阅读所有这些内容，我们将不胜感激。

Answer 1

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

::解决方案::

所以我刚开始工作。您需要延迟加载您的第 3 方 JS 文件。在此处查看 post 的答案（第一个）

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

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

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

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

AngularJS ngRoute 子视图未在父视图中加载 Javascript

AngularJS ngRoute Child View not Loading the Javascript in the Parent View

javascript

angularjs

angular-routing