javascript - Angularjs $compile(html)($scope) - 错误 : Converting circular structure to JSON

Question

我有一个应用程序，我需要在其中创建 html 并将其添加到对象数组。然后应该将此 html 输出到页面中。很简单。但是，我还需要使 html 响应用户操作(单击)，在这种情况下，angular 需要我使用 $compile 来创建一个 Angular 化的模板。

参见 Plunkr .在此示例中，应该发生的是当您单击其中一个按钮时，会生成一个弹出窗口，其中嵌入了对象中的 html 代码，您可以在 JSON 输出中看到它。

我一执行此操作，就收到错误 Converting circular structure to JSON。如果我不这样做，则不会调用 ng-click="Go()"。

脚本

        var template = "<ul class='unstyled'>" +
                "<li ng-click='go()' style='background-color:lightcyan;'><ul class='inline'><li>1...</li><li>1...</li></ul></li>" +
                "<li ng-click='go()'><ul class='inline'><li>1...</li><li>1...</li></ul></li>" +
                "<li ng-click='go()' style='background-color:lightcyan;'><ul class='inline'><li>1...</li><li>1...</li></ul></li>" +
                "</ul>";

       // template = $compile(template)($scope);

        $scope.data = [
            {"id": 1, "html": template},
            {"id": 2, "html": template}
        ];

        $scope.go = function () {
            alert('It works');
        };

        $scope.openPopin = function (html) {
            var e = window.event;
            var popin = document.getElementById('popin');
            var innerdiv = document.getElementById('innerdiv').innerHTML=html;
            popin.style.top= e.pageY - 20+"px";
            popin.style.left = e.pageX - 20+"px";
            popin.style.marginLeft = -500+"px";
            popin.style.marginTop = -100+"px";
        };

        $scope.closePopin = function () {
            var popin = document.getElementById('popin');
            popin.style.top = -500+"px";
            popin.style.left = -500+"px";
        };

HTML

  <div class="popin grey-border" id="popin">
      <button class="close" ng-click="closePopin()">&times;</button>
      <div id="innerdiv"></div>
  </div>

  <pre>{{ data |json }} </pre>

  <br/>
  <table style="float: right;">
      <tr ng-repeat="d in data" id="{{$index}}">
          <td>{{ d.id }} -
              <button class="btn btn-mini btn-info" ng-click="openPopin(d.html)"><i class="icon-info-sign"></i></button>
          </td>
      </tr>
  </table>

Answer 1

我通过将编译步骤移至 openPopin 函数，并用更具 Angular 替代方案替换样式属性更改，使其(对我而言)起作用。而且我还忽略了 window.event，它不是跨浏览器兼容的(不是问题的一部分)。

app.controller('MainCtrl', function($scope, $compile) {
    var template = "<ul class='unstyled'>" +
            "<li ng-click='go()' style='background-color:lightcyan;'><ul class='inline'><li>1...</li><li>1...</li></ul></li>" +
            "<li ng-click='go()'><ul class='inline'><li>1...</li><li>1...</li></ul></li>" +
            "<li ng-click='go()' style='background-color:lightcyan;'><ul class='inline'><li>1...</li><li>1...</li></ul></li>" +
            "</ul>";

    $scope.data = [
        {"id": 1, "html": template},
        {"id": 2, "html": template}
    ];

    $scope.go = function () {
        console.log("go");
    };

    $scope.openPopin = function (html) {
        var popin = document.getElementById('popin');
        var innerdiv = document.getElementById('innerdiv');
        innerdiv.innerHTML=html;
        $compile(innerdiv)($scope);
        angular.element(popin).css({top:'20px', left:'20px'});
    };

    $scope.closePopin = function () {
        var popin = document.getElementById('popin');
        angular.element(popin).css({top:'-500px', left:'-500px'})
    };
});

所以，这是让它发挥作用的一种方法。但问题是，你真正想做什么，我们不能用更 Angular 方式来做吗？ (使用指令、模板和 Angular 提供的其他工具。)