我希望您能以编程方式向各种DOM元素添加ng-* HTML属性。我曾尝试使用
我通过jQuery添加ng-*属性...是的,我知道,指令,但由于我添加的ng-* HTML属性是基于DOM结构的样板操作,因此这对我不起作用。而且,与jQuery DOM操作相比,指令似乎很笨重(至少可以这样说)。
那么...有没有办法在Angular运行之前添加这些样板ng-* HTML属性,以避免重新
首先,我创建了一个名为“angular-defer-bootstrap.js”的文件,它在“angular.js”之前包含以下代码:
这里的问题在于,
通过这几行代码,我现在可以干净地钩取 Angular 的“预初始化”(即预引导)并执行我想要的任何操作,而无需重新
$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
(及其不必要的后果),这正是我想要的!