javascript - Controller 处理后注入(inject)JS文件

Question

我已经在某件事上苦苦挣扎了好几天了。我的 Controller 通过 API 调用填充了一个 View 。这里没问题，HTML 渲染得很好。

$http.get(url).
    success(function(data, status, headers, config) {
        $scope.myHTML = html;
})

元素绑定(bind)

<div ng-bind-html="myHTML"></div>

现在我在页面内得到了一个 JS 文件(由 Bower 包含)，它需要 api 调用的内容才能运行。但由于它包含在页面内，因此它会在 Controller 执行之前运行，正如我在控制台上看到的那样。

由于我是 AngularJS 的初学者，我可能会错过一些基础知识，但我没有找到任何关于如何在 Controller 完成工作后包含和运行 JS 文件的内容。我可以获取 js 文件中的所有代码并将其粘贴到 Controller 上，但由于它是一个 CSS 依赖项库，我想避免这种情况。

简而言之，在 Controller 调用 API 后，如何包含并执行 JS 库？

提前致谢!

Answer 1

看起来您使用的这个库不是很灵活，并且在 window.onload 事件上初始化自身，甚至没有提供稍后手动进行初始化的方法。在这种情况下，您可以做的就是 Hook window.onload 事件并动态加载脚本。

为此，创建帮助程序服务会很方便，该服务将按需加载脚本，并且仅在 DOM 中提供必要的 HTML 后才执行此操作。

它可能看起来像这样:

app.controller('MainCtrl', function($scope, $sce, $http, windowLoadedHook) {

    $http.get(url).
    success(function(data) {
        // Set HTML first
        $scope.myHTML = $sce.trustAsHtml(data);

        // Load library and intercept its window.onload assignment so that
        // you invoke init function when AccesSlide tries to set event handler
        windowLoadedHook.load('path/to/library/AccesSlide.js');
    });

});

app.service('windowLoadedHook', function() {
    return {
        load: function(src) {
            // If document is already loaded then hook into assigment call
            if (document.readyState === 'complete') {
                Object.defineProperty(window, 'onload', {
                    set(handler) {
                        handler();
                    }
                });
            }

            // and load script file finally
            var script = document.createElement('script');
            script.src = src;
            document.body.appendChild(script);
        }
    };
});