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

Question

如何使以下代码将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}}

编辑

我希望添加到 body 元素，不仅仅是插值静态 HTML，而是一个角度应用程序 - 以便它反映范围的变化，具有事件处理程序等。

Answer 1

您需要将其绑定到$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);
    });
}

或者，您可以使用$interpolate模块。

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