1

我正在尝试加载 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 文件等的好方法是什么？

4

2 回答 2

1

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

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

或者

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

于 2013-10-11T11:25:13.483 回答
0

由于元素内容是普通的、服务器生成的没有动态绑定的 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>
于 2013-10-11T11:22:39.387 回答