When using AngularJS to compile HTML with $compile and $scope, an error may occur stating: "Unable to convert circular

Question

When using AngularJS to compile HTML with $compile and $scope, an error may occur stating: "Unable to convert circular

I have a project that involves creating dynamic HTML and adding it to an object array. This HTML needs to be displayed on the page and be responsive to user interactions, such as clicking. Angular requires me to use $compile to create an angularized template when handling user actions.

Check out the example on Plunkr. When you click on one of the buttons, a popup should appear with the HTML code embedded in the object, visible in the JSON output.

However, I encounter an error "Converting circular structure to JSON" when attempting this implementation. If I skip this step, the ng-click="Go()" function does not get called.

SCRIPT

        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>

javascript angularjs

Answer 1

Answer №1

I managed to achieve success by relocating the compile step to the openPopin function and opting for a more angular-friendly approach when making style property changes. Additionally, I opted to disregard the utilization of window.event, as it is not universally compatible across browsers (and it isn't pertinent to the issue at hand).

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'})
    };
});

This method successfully resolves the issue, but it begs the question: What specific goal are you aiming to accomplish, and could we potentially achieve it in a more angular-centric manner? (By utilizing directives, templates, and other angular tools.)

Answer 2

I managed to achieve success by relocating the compile step to the openPopin function and opting for a more angular-friendly approach when making style property changes. Additionally, I opted to disregard the utilization of window.event, as it is not universally compatible across browsers (and it isn't pertinent to the issue at hand).

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'})
    };
});

This method successfully resolves the issue, but it begs the question: What specific goal are you aiming to accomplish, and could we potentially achieve it in a more angular-centric manner? (By utilizing directives, templates, and other angular tools.)

Answer 3

Answer №2

Appreciate the assistance towr - make sure to check out the last comment above

Below is the provided HTML code snippet:

<script type="text/ng-template" id="cmpbpopin.html">
    <button class="btn btn-mini btn-info"><i class="icon-info-sign"></i></button>
    <div class="popin grey-border">
        <button class="close-button">&times;</button>
        <div></div>
    </div>
</script>

<table style="float: right;">
  <tr ng-repeat="d in data" id="{{$index}}">
    <td>{{ d.id }}</td>
    <td>
        <div cm-pb-popup="d.html"></div>
    </td>
 </tr>
</table>
</body>

Here is the included SCRIPT section:

var app = angular.module('app', []);

    app.controller('Ctrl', function ($scope, $compile, $http) {

        var template = "<table class='pblist table table-condensed table-hover'>" +
                "<tr ng-click='go()'><td>1...</td><td>1...</td></tr>" +
                "<tr ng-click='go()'><td>1...</td><td>1...</td></tr>" +
                "<tr ng-click='go()'><td>1...</td><td>1...</td></tr>" +
                "</table>";

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

    });

    app.directive("cmPbPopup", function ($compile, $timeout) {
        return{
            templateUrl: "cmpbpopin.html",
            scope: {
                cmPbPopup: "="
            },
            link: function (scope, elem, attrs) {
                elem.bind("click", function (e) {
                    var popupDiv = elem.find('div');
                    var innerDiv = popupDiv.find('div');
                    var closeButton = popupDiv.find('.close-button')

                    if (e.srcElement.nodeName != 'DIV') {
                        if (e.srcElement.className == 'close-button') {
                            closePopup();
                        } else if(e.srcElement.nodeName == 'TR' || e.srcElement.nodeName == 'TD'){
                            // set values in scope
                            closePopup();
                        }
                        else {
                            innerDiv.html(scope.cmPbPopup);
                            $compile(innerDiv)(scope);
                            popupDiv.css({
                                        'top': e.pageY - e.offsetY + 20,
                                        'left': e.pageX - e.offsetX -10,
                                        'height': 100,
                                        'width': 500,
                                        'marginLeft': -500});
                            $timeout(function (){
                                closeButton.css('display', 'block');
                            },500);
                        }
                    }

                    function closePopup(){
                        popupDiv.css({
                            'height': 0,
                            'width': 0,
                            'marginLeft': 0});
                        $timeout(function (){
                            popupDiv.css({
                                'top': -500,
                                'left': -500
                            });
                        },500);
                    }
                });
            }
        }
    })

Lastly, the CSS styling applied:

    div.popin {
        position: absolute;
        width: 0;
        height: 0;
        top: -500px;
        left: -500px;
        background-color: #ffffff;
        transition: width 0.5s, height 0.5s, margin-left 0.5s;
        -webkit-transition: width 0.5s, height 0.5s, margin-left 0.5s; /* Safari */
        overflow: hidden;
    }

    div.popin div {
        position: absolute;
        top: 0 !important;
        left: 500px !important;
        width: 470px !important;
        transition: width 0.2s, height 0.2s, margin-left 0.2s;
        -webkit-transition: width 0.2s, height 0.2s, margin-left 0.2s;   
    }

    .close-button{
        width: 20px;
        height: 20px;
        float: right;
        font-size: 20px;
        font-weight: bold;
        line-height: 20px;
        color: #000000;
        text-shadow: 0 1px 0 #ffffff;
        opacity: 0.2;
        filter: alpha(opacity=20);
    }

    .pblist{
        margin-left: 10px !important;
        margin-top: 10px;
        width: 470px;
        float: left;
    }

    .grey-border {
        border: 1px #d3d3d3 solid;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        padding: 3px;
    }

Answer 4

Appreciate the assistance towr - make sure to check out the last comment above

Below is the provided HTML code snippet:

<script type="text/ng-template" id="cmpbpopin.html">
    <button class="btn btn-mini btn-info"><i class="icon-info-sign"></i></button>
    <div class="popin grey-border">
        <button class="close-button">&times;</button>
        <div></div>
    </div>
</script>

<table style="float: right;">
  <tr ng-repeat="d in data" id="{{$index}}">
    <td>{{ d.id }}</td>
    <td>
        <div cm-pb-popup="d.html"></div>
    </td>
 </tr>
</table>
</body>

Here is the included SCRIPT section:

var app = angular.module('app', []);

    app.controller('Ctrl', function ($scope, $compile, $http) {

        var template = "<table class='pblist table table-condensed table-hover'>" +
                "<tr ng-click='go()'><td>1...</td><td>1...</td></tr>" +
                "<tr ng-click='go()'><td>1...</td><td>1...</td></tr>" +
                "<tr ng-click='go()'><td>1...</td><td>1...</td></tr>" +
                "</table>";

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

    });

    app.directive("cmPbPopup", function ($compile, $timeout) {
        return{
            templateUrl: "cmpbpopin.html",
            scope: {
                cmPbPopup: "="
            },
            link: function (scope, elem, attrs) {
                elem.bind("click", function (e) {
                    var popupDiv = elem.find('div');
                    var innerDiv = popupDiv.find('div');
                    var closeButton = popupDiv.find('.close-button')

                    if (e.srcElement.nodeName != 'DIV') {
                        if (e.srcElement.className == 'close-button') {
                            closePopup();
                        } else if(e.srcElement.nodeName == 'TR' || e.srcElement.nodeName == 'TD'){
                            // set values in scope
                            closePopup();
                        }
                        else {
                            innerDiv.html(scope.cmPbPopup);
                            $compile(innerDiv)(scope);
                            popupDiv.css({
                                        'top': e.pageY - e.offsetY + 20,
                                        'left': e.pageX - e.offsetX -10,
                                        'height': 100,
                                        'width': 500,
                                        'marginLeft': -500});
                            $timeout(function (){
                                closeButton.css('display', 'block');
                            },500);
                        }
                    }

                    function closePopup(){
                        popupDiv.css({
                            'height': 0,
                            'width': 0,
                            'marginLeft': 0});
                        $timeout(function (){
                            popupDiv.css({
                                'top': -500,
                                'left': -500
                            });
                        },500);
                    }
                });
            }
        }
    })

Lastly, the CSS styling applied:

    div.popin {
        position: absolute;
        width: 0;
        height: 0;
        top: -500px;
        left: -500px;
        background-color: #ffffff;
        transition: width 0.5s, height 0.5s, margin-left 0.5s;
        -webkit-transition: width 0.5s, height 0.5s, margin-left 0.5s; /* Safari */
        overflow: hidden;
    }

    div.popin div {
        position: absolute;
        top: 0 !important;
        left: 500px !important;
        width: 470px !important;
        transition: width 0.2s, height 0.2s, margin-left 0.2s;
        -webkit-transition: width 0.2s, height 0.2s, margin-left 0.2s;   
    }

    .close-button{
        width: 20px;
        height: 20px;
        float: right;
        font-size: 20px;
        font-weight: bold;
        line-height: 20px;
        color: #000000;
        text-shadow: 0 1px 0 #ffffff;
        opacity: 0.2;
        filter: alpha(opacity=20);
    }

    .pblist{
        margin-left: 10px !important;
        margin-top: 10px;
        width: 470px;
        float: left;
    }

    .grey-border {
        border: 1px #d3d3d3 solid;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        padding: 3px;
    }

When using AngularJS to compile HTML with $compile and $scope, an error may occur stating: "Unable to convert circular

Answer №1

Answer №2

Similar questions

Guide on utilizing getelementsbytagname for retrieving LI values

Is it possible to apply/render only one scope at a time in AngularJS?

input value does not change when the "keyup" event is triggered

What is the best way to integrate a block of text that is displayed on multiple pages within my application?

Strategies for maintaining pristine Firebase child paths

Differences in behavior across operating systems when pasting content copied from Excel into Next.js

Managing various encoding methods when retrieving the XML data feed

Preventing runtime error in Next.js API routes by handling axios exceptions

Collecting values using AJAX in Codeigniter from an input file

The module 'tcp' is missing in Node.js and cannot be located

Switch to a different form when clicked using JavaScript

Angular5 causing all divs to have click events at once instead of individually triggered

The datetime picker feature in AngularJS ui-grid was malfunctioning

Creating an input range element and its event handler dynamically within the ajaxStop function allows for real-time updates based on the

When using QML, functions like Object.keys, Object.values, and JSON.stringify may return unexpected empty results

The application suddenly displays a blank white screen after encapsulating my layout with a context provider

Turn off the background when the automatic popup box appears

The HTTPOnly cookie is not accessible within the getServerSideProps function in Next.js

An effective way to determine the size of a browser through javascript

What methods can I utilize from Google Maps within Vuex's createStore()?