AngularJS-是否可以从代码中编译和链接模板

AngularJS - Is it possible to compile and link template from code?

本文关键字:编译 链接 代码 是否 AngularJS-      更新时间:2023-09-26

如何将以下代码追加到文档中2

var $injector = angular.injector(['ng']);
$injector.invoke(function ($compile, $rootScope) {
    var link = $compile('<p>{{1+1}}</p>');
    var newElement = link($rootScope);
    $(document.body).append(newElement);
});

我现在在浏览器中看到的是

{{1+1}}

编辑

我希望添加到主体元素,不仅仅是插入的静态HTML,而是一个有角度的应用程序,这样它就可以反映范围的变化,具有事件处理程序等。

您需要将其绑定到$scope而不是$rootScope,请将行更改为

function ctrl($scope) {
    var $injector = angular.injector(['ng']);
    $injector.invoke(function ($compile) {
        var link = $compile('<p>{{1+1}}</p>');
        var newElement = link($scope);
        $(document.body).append(newElement);
    });
}

或者,您可以使用$interpole模块。

function ctrl($scope, $interpolate) {
    var $injector = angular.injector(['ng']);
    $injector.invoke(function ($compile) {
        var link = '<p>{{1+1}}</p>';
        var exp = $interpolate(link)({});
        $(document.body).append(exp);
    });
}