Question

背景

您可以在使用$compile方法引导角度应用程序后调用angular.injector。

angular.injector(['ng', 'late']).invoke(function($rootScope, $compile) {
    $compile(myElement)($rootScope)
}

这适用于我在late模块上创建的指令，但不会调用我的任何ng-bind。

实施例

我在一个与我需要编译的元素分开的元素上初始化了角度应用程序。

<div ng-app="test">
</div>

<div id="uncompiled">
{{ $id }}
  <div ng-controller="LateController as cont">
    {{ $id }} {{ "5" }} {{ cont.clicked }}
    <div late-directive="5"></div>
  </div>
</div>

然后，一旦angular完成bootstrapping，我就会为应该晚编译的元素创建模块和指令。

angular.element(document).ready(function() {
  angular.module('late', [])

  angular.module('late').controller('LateController', function($scope) {
    console.log('Make controller', $scope)
    $scope.lateController = true
    this.clicked = 6
  })  

  angular.module('late').directive('lateDirective', function() {
    console.log('Make directive')
    return {
      restrict: 'A',
      template: '<span>INNEREST {{ $id }}</span> COMPILED LATE!!! {{ $id }} {{ cont.clicked }}',
    }
  })

  angular.injector(['ng', 'late']).invoke(function($compile, $rootScope) {
    console.log('Injecting')
    var el = angular.element(document.getElementById('uncompiled'))
    $compile(el)($rootScope)
  })
})

Play around使用我的代码或查看output。

如果您注意到，所有{{ }} ng-binds都没有被替换，但指令模板（lateDirective）被插入到文档中。

问题

为什么某些指令有效而其他指令无效？

如何让所有指令在延迟$compile内正常工作？

Answer 1

通过添加一行简单的html来说明发生这种情况的关键。如果您在LateController

中添加其他元素

<input ng-model="cont.text" />

然后整个示例按预期工作。 为什么要在其他指令中添加ng-model效果？这种行为表明其他指令正在执行;他们只是没有将他们的值输出到屏幕上。

在正常的角度应用程序中，在设置完所有内容后，应用程序将运行$digest个周期。但是，使用$injector.invoke时，$digest周期不会自动运行。

添加ng模型时该示例有效的原因是ng-model运行$digest。

解决方案：在$rootScope.$digest()的末尾添加invoke。

角度延迟编译跳过ng-bind

背景

实施例

问题

1 个答案: