Question

我想将模板中的内容绑定到Angular应用程序中的数据。模板存储在html文件中并包含绑定表达式：

<div>
    <div class="case-header">
        <h3>Case Details</h3>
    </div>
    <div class="case-body">
        <div>
            <label>Case Number:</label><div>{{item.CaseNumber}}</div>
        </div>
        <div>
            <label>Name:</label><div>{{item.CandidateName}}</div>
        </div>
        ...
    </div>
</div>

为模板提供上下文和数据的元素是ng-grid中的一行。在下面的函数中，我创建了一个新的范围来包含当前行的数据。在构造控制器时，从html文件中检索模板的内容并缓存到属性。但是，$ compile调用不会按我的意愿绑定数据。该函数返回模板标记，其中仍包含绑定表达式。我尝试了两种绑定表达式。

    $scope.getTooltip = function (row) {
        var scope = $scope.$new();
        scope.item = row.entity;
        var elem = angular.element($scope.template);
        var result = $compile(elem)(scope);
        return result.html();
    };

对$ compile的调用似乎对documentation是正确的，但我想我一定是误解了一些东西。

如何将数据值注入模板？

Plunker

这是一个Plunker来玩。

Answer 1

$ compile（scope）返回对原始dom元素的引用或它的克隆，因此您应该将它附加到某个元素。我已经更新了你的plunker http://plnkr.co/edit/qatH4XNKPxjPyicur67T?p=preview，所以看看它有效。

将模板绑定到AngularJS中的数据

1 个答案: