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

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

angularjs

AngularJS：将XHR中接收的JavaScript绑定到视图,angularjs,Angularjs,处理报告应用程序，其中报告是从BIRT报告引擎对象以HTML格式生成的。报告数据来自于从XHR接收的JSON字符串。JSON字符串包含HTML和javascript的组合，特别是函数调用。收到报告数据后，报告数据将填充到视图中，以便在视图中显示。视图是使用AngularJS组合在一起的我做了一些工作，发现将HTML/javascript绑定到Angular中的视图需要使用$compile。以此为基础，我编写了一些代码，这些代码将包含数据并执行从$scope中显式定义的字符串绑定的代码。但是-除

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

我做了一些工作，发现将HTML/javascript绑定到Angular中的视图需要使用$compile。以此为基础，我编写了一些代码，这些代码将包含数据并执行从$scope中显式定义的字符串绑定的代码。但是-除非我在盯着同一个东西看了几个小时后忽略了什么，否则我使用的方法不适用于XHR定义的$scope数据。以显示实施的总体思路。如有任何建议，将不胜感激

HTML

Javascript

当html.body仍然未定义时，您的手表就在开始时熄灭。然后运行EnsureRecompilerOnce并取消对作用域的访问。因此，正确的报告一旦加载，就永远不会被编译。我取消了行的注释，以确保重新编译，并获得报告的良好视图

哦！我还没有完全理解异步交换。谢谢

<!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>

    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();
                            }
                    );
                };
            }]);