adding div using javascript that uses angularjs to show data

Question

I would like to add a div to my current website.

The div i would like to add should show some json data using angularjs.

My problem is that it does not look like angularjs is working like its supose to when adding html after the page is rendered.

Here is my test:

<html >
  <head>
    <meta charset="utf-8">
    <title>Angular test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  </head>

  <script>


    var featureInfoMainDivId = 'FeatureInfoMaster';

    function initAngularDataFeatureInfo() {
        var s = document.createElement('script');
        s.type = "text/javascript";
        s.textContent =
            'var app = angular.module("featureInfoApp", []); ' +
            'app.controller("featureInfoCtrl", function ($scope) { ' +
                '$scope.firstName = "John" '+
                '$scope.lastName = "Doe" ' +
            '});';
        document.getElementById(featureInfoMainDivId).appendChild(s);
    }

    function addFeatureInfoDiv() {        
        var divMain = document.createElement('div');        
        divMain.setAttribute('id', featureInfoMainDivId);
        divMain.setAttribute('ng-app', "featureInfoApp");
        divMain.setAttribute('ng-controller', "featureInfoCtrl");
        divMain.innerHTML ='<div> {{ firstName + " " + lastName }}</div>';

        document.getElementById('appdiv').appendChild(divMain);

        initAngularDataFeatureInfo();
    }


  </script>


  <body >

    <div id="appdiv"></div>

    <button id="btn_load_grid" onclick="addFeatureInfoDiv();">loaddata</button>


  </body>
</html>

eschmidt · Accepted Answer · 2016-04-12 13:33:56Z

1

You are missing two semicolons in

$scope.firstName = "John";
$scope.lastName = "Doe";

If you load the Angular script it looks for ng-app and bootstraps itself. Since you add Angular specific code after the script is loaded, you need to bootstrap Angular manually with:

//after initAngularDataFeatureInfo();
angular.element(document).ready(function() {
  angular.bootstrap(document, ['featureInfoApp']);
});

Please remove this line:

divMain.setAttribute('ng-app', "featureInfoApp");

It is not needed if you bootstrap Angular manually. For further bootstrapping info, see: Angular bootstrapping documentation.

Also: Is there a reason why you are using Angular version 1.2.26? Version 1.5.3 is the latest stable build.

answered Apr 12, 2016 at 13:33

eschmidt

913 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jacob Christiansen Over a year ago

Great that was it, thanks a lot. I now use version 1.5.3.

Vipul · Accepted Answer · 2016-04-12 12:30:30Z

0

Try using Angular directives. you can create a customer directive which will then feed a template of your liking

answered Apr 12, 2016 at 12:30

Vipul

2,1512 gold badges16 silver badges12 bronze badges

Collectives™ on Stack Overflow

adding div using javascript that uses angularjs to show data

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related