getting the inner html of a contenteditable div in angularjs

Question

I am trying to get innerHTML of a contenteditable div via function defined in controller of angularjs but it returns undefined every time.. what are the alternatives or how can I handle this issue?

$scope.genrate_HTML=function()
        {
            var read_string=document.getElementsByClassName("MainPage");
            //console.log(read_string);
            var p_tag= '\n<p id="test"> \n'+read_string.innerHTML+'\n </p>';




            //document.getElementById("createdHTML").value = p_tag ;
            //$compile( document.getElementById('createdHTML') )($scope);

        }

the contenteditble div's classs name is "MainPage"

VisualEditor.controller("GenrateHTML",function($scope){
        $scope.savefile=function()
        {
            $scope.genratedHTML_text=document.getElementById("createdHTML").value;
            var text_file_blob= new Blob([$scope.genratedHTML_text],{type:'text/html'});
            $scope.file_name_to_save=document.getElementById("file_name").value ;
            var downloadLink=document.createElement("a");
            downloadLink.download=$scope.file_name_to_save;
            downloadLink.innerHTML="Download File";
            if(window.URL!=null)
            {
                downloadLink.href=window.URL.createObjectURL(text_file_blob);
            }
            else
            {
                downloadLink.href = window.URL.createObjectURL(text_file_blob);
                downloadLink.onclick = destroyClickedElement;
                downloadLink.style.display = "none";
                document.body.appendChild(downloadLink);
            }

            downloadLink.click();
        }

        function destroyClickedElement(event)
        {
            document.body.removeChild(event.target);


        }
        $scope.toggleModal = function(){
            $scope.showModal = !$scope.showModal;
        };
        ///add details

        $scope.details=[];

        $scope.addDetails=function(){
            $scope.details.push({
                Title:$scope.Details_Title,
                meta_chars:$scope.Details_metaChars,
                version:$scope.Details_version,
                Auth_name:$scope.Details_AuthName,
                copyRights:$scope.Details_copyRights
            });
            document.getElementById("createdHTML").innerHTML = $scope.details;

        };

        $scope.$watch('details', function (value) {
            console.log(value);
        }, true);
        /////////////////////

        $scope.genrate_HTML=function()
        {
            var read_string=document.getElementsByClassName("MainPage");
            //console.log(read_string);
            var p_tag = '';
            for (var i = 0; i < read_string.length; i++) {
                p_tag += '\n<p id="test_"' + i + '> \n' + read_string[i].innerHTML + '\n </p>';


                document.getElementById("createdHTML").value = p_tag;
            }
            //$compile( document.getElementById('createdHTML') )($scope);

        }




    });

Answer 1

getElementsByClassName returns an Array, so, your read_string variable is an Array type. you should iterate through the elements of read_string with for loop.

NOTE: Please check the p element's id here aswell. Because id must be unique!

$scope.genrate_HTML = function() {
    var read_string = document.getElementsByClassName("MainPage");
    var p_tag = '';
    for (var i = 0; i < read_string.length; i++) {
        p_tag += '\n<p id="test_"'+i+'> \n'+read_string[i].innerHTML+'\n </p>';
    }
    /* Other code here... */
}

UPDATE: Don't use the code below! If read_string returns with no elements than your code will crash!

But if it's a 1 element Array then you can take the value like:

$scope.genrate_HTML = function() {
    var read_string = document.getElementsByClassName("MainPage");
    var p_tag= '\n<p id="test"> \n'+read_string[0].innerHTML+'\n </p>';
    /* Other code here... */
}

I hope that helps. If it doesn't then paste the full code of the Controller.