Question

我正在尝试加载html片段并在div标签内显示。所以我写了一个简单的指令：

myDirectives.directive('myRpt', function () {
    'use strict';
    return {
        restrict: 'A',
        scope: true,
        link: function (scope, elem, attrs, ctrl) {
            var htmlExpr = attrs.myRpt;
            scope.$watch(htmlExpr, function (newHtml) {
                if (newHtml) {
                    elem.html(newHtml);
                }
            }, false);
        }
    };
});

在html页面中，它的用法如下：

<div my-rpt="report">
</div>

现在我有一个控制器：

$http.get('api/v1/general_ledger', { params: { q: { filter: [
    { 'name': 'begin_date', 'op': '==', 'val': $scope.criteria.beginDate },
    { 'name': 'end_date', 'op': '==', 'val': $scope.criteria.endDate }]
}}}).then(
    function (resp) {
        $scope.report = resp.data;
    },
    function (resp) {
        //TODO: show error message
    }
);

上面的代码有效，但我不确定它是否足够好。例如，$ scope.report可能包含非常大的字符串/ html内容，但我猜浏览器将拥有自己的解析副本。此外，一般来说，创建业务报告的好方法是什么，并在需要时生成pdf，excel文件等？

Answer 1

您无需创建自己的指令，因为您可以使用

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

或

http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe

Answer 2

由于元素内容是普通的，没有动态绑定的服务器生成的HTML，我不明白为什么不使用这种方法。

如果HTML字符串足够大，您可以使用它然后将其删除，以免占用内存。删除它可能需要稍微不同的代码，例如使用事件并将事件名称指定为指令的属性：

// in the controller:
$http.get(...).then(
    function(resp) {
        $rootScope.broadcast("receivedReport", resp.data);
    },
...

// in the directive:
link: function (scope, elem, attrs, ctrl) {
    var eventName = attrs.myRpt;
    scope.$on(eventName, function(data) {
        elem.html(data);
    });
}

模板用法：

<div my-rpt="receivedReport"></div>

带有angularjs的动态html片段

2 个答案: