Question

我正在使用AngularJS来设计一个用于搜索的小应用程序。我有一个当前为空的div，并在运行一个函数后，用一个具有ng-include的div替换它。 div替换得很好，但ng-include不会加载。

我目前正在控制台中运行以下内容进行测试以查看是否正在运行。我该如何让这个工作？任何帮助表示赞赏！

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

Answer 1

阅读angularjs $ compile function

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，你正在尝试做的事情看起来非常jQueryesque（糟糕的话），因为你选择的元素直接看起来完全脱离$ digest和$ compile-cycles of angular，所以我也建议阅读这个答案： "Thinking in AngularJS" if I have a jQuery background?

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()

Javascript - 执行HTML / Angular ng-include

3 个答案: