有没有办法在Angular运行之前运行Javascript代码？

Question

我希望您能以编程方式向各种DOM元素添加ng-* HTML属性。我曾尝试使用$compile(obj)($scope);，但是这次二次编译会导致一些组件的问题。

我通过jQuery添加ng-*属性...是的，我知道，指令，但由于我添加的ng-* HTML属性是基于DOM结构的样板操作，因此这对我不起作用。而且，与jQuery DOM操作相比，指令似乎很笨重（至少可以这样说）。

那么...有没有办法在Angular运行之前添加这些样板ng-* HTML属性，以避免重新$compile？我真正想要的是在Angular上进行预初始化的方法，有这样的解决方法吗？ 解决方案： @ChrisMartin引导我找到了解决这个问题的正确方法（感谢Chris！）。我最终这样做...

首先，我创建了一个名为“angular-defer-bootstrap.js”的文件，它在“angular.js”之前包含以下代码：

//# Set the window.name to signal Angular to delay bootstrapping until `angular.resumeBootstrap()` is called.
//#     See: https://dev59.com/r2Ei5IYBdhLWcg3wq97k#21049890 and https://docs.angularjs.org/guide/bootstrap
//#     NOTE: This MUST be included BEFORE angular*.js
window.name = 'NG_DEFER_BOOTSTRAP! ' + window.name;

我随后使用jQuery创建了以下函数，用于执行任何Angular之前的bootstrap代码：

//####################
//# Setup the jQuery onDocumentLoad event to handle the pseudo-ng-directive of ng-preinit
//####################
$(document).ready(function () {
    var $this, $pre = $('[ng-preinit]');

    //# If we have some [ng-preinit]'s to process
    if ($pre.length > 0) {
        //# Traverse the [ng-preinit] attributes, eval'ing/running each and removing them so Angular doesn't freak out
        $pre.each(function() {
            $this = $(this);
            eval($this.attr('ng-preinit'));
            $this.removeAttr('ng-preinit');
        });
    }

    //# Let Angular know it can .resumeBootstrap and remove the flag from window.name
    angular.resumeBootstrap();
    window.name = window.name.replace('NG_DEFER_BOOTSTRAP! ', '');
});

然后通过包含一个 ng-preinit 伪 Angular 指令/HTML 属性来利用它：

<div class="row" ng-controller="IndexController" ng-init="init()" ng-preinit="globalScope.preinit()">

这里的问题在于，ng-preinit 假象的 Angular 指令中所包含的 eval 代码具有全局作用域，而不是 Angular 控制器的 $scope。

通过这几行代码，我现在可以干净地钩取 Angular 的“预初始化”（即预引导）并执行我想要的任何操作，而无需重新 $compile（及其不必要的后果），这正是我想要的！

- Campbeln

Answer 1

这在Angular手动初始化的文档中有详细解释。

如果您需要更多地控制初始化过程，可以使用手动引导方法。需要这样做的示例包括使用脚本加载器或在Angular编译页面之前执行操作。

- Chris Martin