Question

我已经挣扎了好几天了。我得到了一个由我的控制器通过API调用填充的视图。这里没问题，HTML渲染得很好。

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

元素绑定

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

现在我在页面内部（由凉亭包含）获得了一个JS文件，该文件需要运行api调用的内容。但是因为它包含在页面内部，所以在控制器执行之前运行，就像我在控制台上看到的那样。

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

简而言之，在控制器调用API之后，您将如何包含和执行JS库？

提前致谢！

Answer 1

看起来您使用的这个库不是很灵活，并且在window.onload事件上初始化自己，甚至没有提供以后手动设置它的方法。在这种情况下你可以做的是动态地挂钩到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);
        }
    };
});

在控制器处理后注入JS文件

1 个答案: