Question

处理报告应用程序，其中从BIRT报告引擎对象生成报告（以HTML格式）。报告数据来自XHR收到的JSON字符串。 JSON字符串包含HTML和javascript的组合（具体是函数调用）。收到后，报告数据将填充到视图中以供显示。使用AngularJS将视图放在一起。

我做了一些research，发现将HTML / javascript绑定到Angular中的视图需要使用$ compile。以此为基础，我将一些代码放在一起，这些代码将包含数据并执行从$ scope中明确定义的字符串绑定的代码。但是 - 除非我在盯着相同的东西几个小时后忽略某些东西，否则我使用的方法不适用于XHR定义的$ scope数据。 Here's a plunkr显示已实施的总体思路。任何建议都将不胜感激。

HTML

<!DOCTYPE html>
<html data-ng-app="example">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-sanitize.js"></script>
    <script src="script.js"></script>
</head>
<body ng-controller="controller" >
    <h1>Static Content</h1>
    <p><button href="javascript: void(null)" role="link" ng-click="loadSubreport('recv_po_detail.rptdesign', 'static')">PO000007</button></p>
    <h1>HTML from static string</h1>
    <div compile="snippet"></div>
    <h1>HTML from server string</h1>
    <div compile="html.body"></div>
    <hr />
    <button ng-click="alert()">Show XHR Data</button>
</body>
</html>

Javascript

    var app = angular.module('example', []);
    app.controller('controller', ['$scope', '$compile', '$http', function ($scope, $compile, $http){
        $scope.snippet="<p><button href=\"javascript: void(null)\" ng-click=\"loadSubreport('recv_po_detail.rptdesign', 'compiled')\">PO000007</button></p>";
        $http.get('data.json')
                .success(function (data) {
                    $scope.html = data;
                });
        $scope.loadSubreport = function (filename, source) {
            alert("Called from " + source);
        };
        $scope.alert = function () {{
          alert($scope.html.body);
        }}
    }]);
    app.directive('compile', ['$compile', function ($compile) {
                "use strict";
                return function (scope, element, attrs) {
                    var ensureCompileRunsOnce = scope.$watch(
                            function (scope) {
                                return scope.$eval(attrs.compile);
                            },
                            function (value) {
                                element.html(value);
                                $compile(element.contents())(scope);
                                ensureCompileRunsOnce();
                            }
                    );
                };
            }]);

Answer 1

当html.body仍然未定义时，您的手表会在开始时立即启动。然后运行ensureCompileRunsOnce()并取消监视范围。因此，正确的报告一旦加载，就永远不会被编译。我取消注释了行ensureCompileRunsOnce()，并对报告有了很好的了解。

DEMO

AngularJS：将XHR中收到的JavaScript绑定到视图

1 个答案: