javascript 我们如何在 Angularjs 的指令之外使用 $compile
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22370390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how can we use $compile outside a directive in Angularjs
提问by user1673394
I want to use $compilein a controller inside a function and not in a directive. is it possible? I am trying the below code.
我想$compile在函数内部的控制器中使用，而不是在指令中使用。是否可以？我正在尝试下面的代码。
$compile('<div ng-attr-tooltip="test">Cancel</div>')(scope)
But this is throwing scope is undefined error. I tried to pass $scopeinside the function but it is not working.
但这是抛出范围未定义的错误。我试图$scope在函数内部传递，但它不起作用。
回答by Vaibhav Jain
How would Angular know that you changed the DOM? You need to compile your html before appending it (using $compile service).
Angular 如何知道您更改了 DOM？您需要在附加之前编译您的 html（使用 $compile 服务）。
If you absolutely need access outside of a directive you can create an injector.
如果您绝对需要在指令之外进行访问，您可以创建一个注入器。
$(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));
});
});
回答by idmitme
It's worth to note, the injector in previous answer (var $injector = angular.injector(['ng', 'myApp']);) will not append compiling directive to your currently running angular app, it will create new instead.
值得注意的是，先前答案 ( var $injector = angular.injector(['ng', 'myApp']);) 中的注入器不会将编译指令附加到您当前运行的 angular 应用程序，而是会创建新的。
To dynamically append new directives to your app, you should use already existed injector:
要将新指令动态附加到您的应用程序，您应该使用已经存在的注入器：
$(function() {
angular.element(document).injector().invoke(function($rootScope, $compile) {
$('body').prepend($compile('<div ng-attr-tooltip="test">Cancel</div>')($rootScope));
});
});
See last paragraph in documentation.
请参阅文档中的最后一段。
回答by Joshua Burns
I tried @Vaibhav Jain's answer, with no success. After a little more digging, this is what I found to work on Angular 1.3, and jQuery:
我尝试了@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);
});
});
回答by Khademul Basher
I recompiled my html by the following way when I was needed to recompile my html to apply the changes on the page.
当我需要重新编译我的 html 以在页面上应用更改时，我通过以下方式重新编译了我的 html。
It happens when I was trying to go to other link and back again to the page but for some reason the angular code was not compiling.
当我尝试转到其他链接并再次返回页面时会发生这种情况，但由于某种原因角度代码没有编译。
So I fixed this by compiling the html part of the page again at a load event.
所以我通过在加载事件中再次编译页面的 html 部分来解决这个问题。
function OnLoad() {
angular.element("form:first").injector().invoke(['$compile', function ($compile) {
var $scope = angular.element("form:first").scope();
$compile("form:first")($scope);
}]);
}
Below is the app declaration.
以下是应用程序声明。
<form ng-app="formioApp" ng-controller="formioAppCtrl">
and OnLoad() function is assigned in a html element's onload event on that page.
并且 OnLoad() 函数在该页面上的 html 元素的 onload 事件中分配。
回答by Inuart
I did this
我做了这个
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);
}
});
use like this
像这样使用
SCOPE.compile(elem1.content, elem2);
