Question

我想在主体中添加一个div运行时，如下所示：

<div>{{test}}</div>

应该从Angular代码外部添加，例如单击按钮时。所以，没有指令，只是添加div。也许是一个简单的问题，但我无法在网上找到答案。

具有

function TodoCtrl($scope) {
    $scope.totalTodos = 4;
}

<body ng-app ng-controller="TodoCtrl">
    <span>{{test}}</span> <!-- already works -->
</body>

Answer 1

如果你真的需要从Angular之外添加HTML：

// HTML to add
var html = '<div>totalTodos: {{ totalTodos }}</div>';

// Add the HTML
var body = angular.element(document.querySelector('body'));
body.append(html);

// Get the application injector
// Can be retrieved from any element of the application wrapped in angular.element
var $injector = body.injector();

// Get a reference to the newly added HTML element
var divs = document.querySelectorAll('div');
var addedDiv = angular.element(divs[divs.length - 1]);

// Get the scope
var $scope = addedDiv.scope();

// Get the $compile service
var $compile = $injector.get('$compile');

// Compile the element and link it to the scope
$compile(addedDiv)($scope);

// Trigger the digest cycle
$scope.$apply();

演示： http://plnkr.co/edit/kNKNvEZsv1ChQejO90T6?p=preview

Answer 2

你应该使用ng-repeat来渲染一个div数组。

以下是一些示例控制器代码：

    $scope.divs = [{
    name: 'I\'m just a default DIV'
    }];

    $scope.add_div = function() {
    // this is simply pushing some new Data to an array
    // that will be rendered in a ng-repeat.
    // You can instead use angulars $http helper
    // to load Data to your scope
    $scope.divs.push({
      name: 'I\'m another DIV'
    })
    }

这是用于呈现div数组的html代码：

   <div ng-repeat="div in divs">{{div.name}}</div>

查看示例Plunker here

<强>更新

如果你想在ng-repeat中渲染从你的服务器返回的html片段，你必须采取一些额外的行动：

在您的应用中加入角度消毒。
在重复内部将您的输出包装在另一个div中，该div呈现为不安全的html（在我通过过滤器获得的plunker中）：
```
<div ng-repeat="div in divs">
   <div ng-bind-html="div.name | unsafe"></div>
</div>
```

通过这种方式，您可以渲染旧的html代码段，但我仍然认为这不是一个好主意。

请参阅更新后的Plunker here

Answer 3

您需要加载片段然后进行角度编译。我有一个案例，我想手动将templateCache中的数据插入到我的一个指令中并使用它：

var template = $templateCache.get('/path/to/file.html');
element.prepend($compile(template)(scope));

该代码的重要部分是$ compile。它将采用原始html，并根据您提供的范围进行编译，就像角度加载它本身一样。

您可以阅读有关$ compile here的更多信息。

在Angular中添加HTML运行时

3 个答案: