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

【问题标题】：AngularJS: Binding JavaScript Received in XHR to the ViewAngularJS：将 XHR 中接收到的 JavaScript 绑定到视图
【发布时间】：2014-09-10 02:14:25
【问题描述】：

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

【问题讨论】：

标签： angularjs

【解决方案1】：

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

DEMO

【讨论】：

天啊！我还没有完全考虑异步交换。谢谢！