javascript - $compile 不编译 html 字符串 - angularJs

Question

我正在尝试使用范围内的属性编译一些带有 Angular Directive(指令)的原始 html，但它没有按预期工作。 这是我在控制台断点处运行的简单代码的快照。

$scope.scopeString = "scope string value";

"scope string value"


$scope.scopeArray = [1,2,3]

(3) [1, 2, 3]


$compile(`<div>{{scopeString}}</div>`)($scope).prop('outerHTML')

"<div class="ng-binding ng-scope">{{scopeString}}</div>"


$compile(`<div><div ng-repeat="item in scopeArray">{{item}}</div></div>`)($scope).prop('outerHTML')

"<div class="ng-scope"><!-- ngRepeat: item in scopeArray --></div>"

谁能告诉我哪里做错了？

Answer 1

范围绑定(bind)是根据摘要周期计算的。立即从元素中检索 HTML 不会让它有机会插入绑定(bind)。

当代码在摘要循环(例如 Controller )内执行时，它可以是

var $el = $compile(`<div>{{scopeString}}</div>`)($scope);
$timeout(() => {
  console.log($el.prop('outerHTML'))
});

在digest外执行时，是

var $el = $compile(`<div>{{scopeString}}</div>`)($scope);
$scope.$apply();
console.log($el.prop('outerHTML'))