我们如何在 Angularjs 的指令之外使用 $compile答案

【问题标题】：how can we use $compile outside a directive in Angularjs我们如何在 Angularjs 的指令之外使用 $compile
【发布时间】：2014-04-17 16:49:57
【问题描述】：

我想在函数内部的控制器中使用$compile，而不是在指令中。可能吗？我正在尝试下面的代码。

$compile('<div ng-attr-tooltip="test">Cancel</div>')(scope)

但这是抛出范围未定义的错误。我试图在函数内部传递$scope，但它不起作用。

【问题讨论】：

stackoverflow.com/questions/12546945/…
stackoverflow.com/questions/15676614/…
您能解释一下为什么要在控制器而不是指令中编译吗？控制器不应该知道 DOM。

标签： javascript angularjs

【解决方案1】：

Angular 怎么知道你改变了 DOM？您需要在附加之前编译您的 html（使用 $compile 服务）。

如果你绝对需要在指令之外访问，你可以创建一个注入器。

$(function() {
  // myApp for test directive to work, ng for $compile
  var $injector = angular.injector(['ng', 'myApp']);
  $injector.invoke(function($rootScope, $compile) {
    $('body').prepend($compile('<div ng-attr-tooltip="test">Cancel</div>')($rootScope));
  });
});

【讨论】：

【解决方案2】：

值得注意的是，上一个答案 (var $injector = angular.injector(['ng', 'myApp']);) 中的注入器不会将编译指令附加到您当前正在运行的 Angular 应用程序中，而是会创建新的。

要将新指令动态附加到您的应用程序，您应该使用已经存在的注入器：

$(function() {
  angular.element(document).injector().invoke(function($rootScope, $compile) {
    $('body').prepend($compile('<div ng-attr-tooltip="test">Cancel</div>')($rootScope));
  });
});

请参阅documentation 中的最后一段。

【讨论】：

很好的答案，谢谢。您只是忘记在函数中注入 $rootScope ;)

【解决方案3】：

我尝试了@Vaibhav Jain 的回答，但没有成功。经过一番挖掘，我发现这是在 Angular 1.3 和 jQuery 上工作的：

$(function() {
  angular.element(document).injector().invoke(['$compile', function ($compile) {
    // Create a scope.
    var $scope = angular.element(document.body).scope();
    // Specify what it is we'll be compiling.
    var to_compile = '<div ng-attr-tooltip="test">Cancel</div>';
    // Compile the tag, retrieving the compiled output.
    var $compiled = $compile(to_compile)($scope);
    // Ensure the scope and been signalled to digest our data.
    $scope.$digest();
    // Append the compiled output to the page.
    $compiled.appendTo(document.body);
  });
});

【讨论】：

【解决方案4】：

我做了这个

var SCOPE;
app_module.controller('appController', function ($scope, $compile) {
    SCOPE = $scope;
    $scope.compile = function (elem_from, elem_to) {
        var content = $compile(angular.element(elem_from))($scope);
        angular.element(elem_to).append(content);
    }
});

这样使用

SCOPE.compile(elem1.content, elem2);

【讨论】：

什么是element1和2？
Elem1 是源元素，在这里你有你想要 Angular 编译的 html 结构。 Elem2 是放置新编译的 html 的地方。

【解决方案5】：

当我需要重新编译我的 html 以在页面上应用更改时，我通过以下方式重新编译了我的 html。

当我试图转到其他链接并再次返回页面时会发生这种情况，但由于某种原因，角度代码没有编译。

所以我通过在加载事件中再次编译页面的 html 部分来解决此问题。

function OnLoad() {
angular.element("form:first").injector().invoke(['$compile', function ($compile) {
    var $scope = angular.element("form:first").scope();
    $compile("form:first")($scope);
}]);
}

以下是应用声明。

<form ng-app="formioApp" ng-controller="formioAppCtrl">

并且 OnLoad() 函数在该页面上的 html 元素的 onload 事件中分配。

【讨论】：