JavaScript - 执行 HTML/Angular ng-include

Question

我正在使用AngularJS设计一个用于搜索的小应用。我有一个当前为空的div，在运行函数后，替换为带有ng-include的div。div成功替换了，但ng-include没有加载出来。

我目前在控制台中运行以下代码以测试它是否能正常运行。该如何使其正常工作？任何帮助将不胜感激！

document.getElementById("resultsDiv").innerHTML = '<div ng-include="" src=" \'sr.html\' "></div>';

- Dustin

Answer 1

阅读有关AngularJS $compile函数的内容。

- konclave

---

读了几遍，但我没有看到一个可行的方法，在点击按钮后编译（这将运行我的函数并最终编译它）。你有例子吗？ - Dustin

Answer 2

我不知道你为什么需要进行这个 JavaScript 调用，但这绝对不是“angular-way”。如果你需要有条件地包含 HTML，我建议使用 ng-if、ng-hide、ng-show 或甚至 ng-switch。可以像这样实现：

// somewhere in your controller 
$scope.triggerSomeInclude = true;

// in your template
<div ng-if="triggerSomeInclude">
    <div ng-include ="'someFile.html'"></div>
</div>

另一种方法是使用指令。它们是唯一一个直接选取元素可能有意义的地方(尽管通常不会通过id选择元素)。但正如我所说，很难确定最佳方法，因为我不确定您要实现什么目标。

尽管您没有使用jQuery，但您要尝试的方法看起来非常类似于jQuery(令人不快的词)，因为您正在直接选择一个元素，与angular的$digest和$compile周期完全无关，所以我建议阅读这个答案： “如果我有jQuery背景，则可考虑AngularJS思维方式”。

- hugo der hungrige

Answer 3

最终，我使用的方法是模板示例，用于ngInclude。

http://docs.angularjs.org/api/ng.directive:ngInclude

例如，在我的控制器中，默认情况下会设置以下内容：

$scope.mainDivTemplate = {url: 'partials/test1.html'}

如果我想将其切换到其他内容，我会调用一个函数，看起来有点像这样。

$scope.loadHome = ->
    $scope.mainDivTemplate = {url: 'partials/home.html'}
    $scope.$apply()

- Dustin