0

背景

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

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

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

例子

我在一个与我需要编译的元素不同的元素上初始化了 Angular 应用程序。

<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 完成引导，我为应该稍后编译的元素创建模块和指令。

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)
  })
})

玩弄我的代码或查看输出。

如果您注意到，所有的{{ }}ng-binds 都不会被替换，而是指令模板 ( lateDirective) 被插入到文档中。

问题

为什么有些指令有效而有些指令无效？

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

4

1 回答 1

0

通过添加一行简单的 html 来演示为什么会发生这种情况的关键。如果您将另一个元素添加到LateController

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

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

在一个普通的 Angular 应用程序中，一切都设置好后，应用程序会运行一个$digest循环。但是，使用 时$injector.invoke，$digest不会自动运行循环。

添加 ng-model 时示例工作的原因是 ng-model runs $digest。

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

于 2015-07-23T18:02:34.943 回答