Question

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

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

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内部的元素不起作用，图像不会加载，而且＃34;骨架＆＃34;他们两个都不行。

此外，我尝试将CSS和JS文件导入放在home.html视图中，但这也无效。

我不知道如何修复它。我认为Javascript for Owl Carousel和Revolution Slider无法与home.html内部的视图进行交互，这是一个问题，因为CSS一般没有问题。

感谢您花时间阅读所有内容，我们非常感谢您提供的帮助。

Answer 1

使用angular-ui-router有一个非常类似的问题。 CSS正在应用，但JS没有做任何事情。无论我装载它在哪里;在索引页面或我的主页中消失。 ng-view / ui-view是否充当命名空间？那个和DOM加载序列是我能想到的唯一会导致这种效果的东西。如果我在这里找到解决方案，我会发帖错误

<强> ::溶液::

所以我才开始工作。你需要延迟加载你的第三方JS文件。看看这里发布的答案（第一篇）

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

1 个答案: