angularjs - 如何编译 $http 请求返回的数据？

Question

我经常遇到一个问题，我无法使用通过 $http 检索的模板部分中包含的指令。我假设我需要对模板使用 $compile 或 $apply 才能使指令正常工作。以下代码尝试对 $http 返回的数据使用 $apply，但它不起作用:

$http({
    url: 'get/data',
    method: "POST"
})
.success(function (data, status, headers, config) { 
     $scope.$apply(function () {
         $scope.data = data;
     });
})
.error(function (data, status, headers, config) { $scope.status = status; });

返回值 (data) 只是一个模板，其中包含一些 HTML，其中包含一些指令。如果我写

.success(function (data, status, headers, config) { $scope.data = data }

然后模板会加载，但模板中的任何指令都不起作用。所以我想我需要使用 $apply 或 $compile 将指令绑定(bind)到 Angular。显然，我在理解 Angular 以及如何将指令绑定(bind)到动态加载模板中工作时缺少一些基本知识。任何帮助将不胜感激。

Answer 1

您是正确的，您需要使用 $compile 服务来处理动态加载模板中的指令。 $compile 处理一些 html 并返回一个链接函数。当使用作用域调用链接函数时，它会返回带有功能指令的完全编译和链接的模板。然后必须将该模板插入到实时 DOM 中。正如 zsong 所指出的，这意味着所有这些实际上都应该在指令中完成，这是 Angular 中 DOM 操作的领域。一行:

container.html($compile(loadedHtml)(scope))

container 是 DOM 中将包含动态模板的元素。我们将其 html 设置为将编译的 html 链接到范围的结果。