データを表示するためにangularjsを使用するjavascriptを使用してdivを追加する

私の現在のウェブサイトにdivを追加したいと思います。データを表示するためにangularjsを使用するjavascriptを使用してdivを追加する

私が追加したいdivは、angularjsを使っていくつかのjsonデータを表示します。

私の問題は、anglejsがページがレンダリングされた後にhtmlを追加するときのように働いているように見えないということです。ここで

は私のテストで：

<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>

出典

2016-04-12 Jacob Christiansen

を作成することができます。スクリプトがロードされた後、あなたが使って手動で角度ブートストラップする必要がある角度固有のコードを追加しているので：

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

この行を削除してください：

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

を手動で角度ブートストラップ場合には必要ありません。さらなるブートストラップ情報については、Angular bootstrapping documentationを参照してください。

また、角度バージョン1.2.26を使用する理由はありますか？バージョン1.5.3は最新の安定したビルドです。

出典

2016-04-12 13:33:56 eschmidt

すごく良かったです、ありがとうございました。私は今バージョン1.5.3を使用します。 –

は角度のディレクティブを使用してみてください。あなたはそれがNGのアプリとブートストラップ自体を探し角度スクリプトを読み込む場合は

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

に2つのセミコロンが欠落している、あなたの好みのテンプレートを供給します顧客ディレクティブ

出典

2016-04-12 12:30:30 Vipul

データを表示するためにangularjsを使用するjavascriptを使用してdivを追加する

答えて

関連する問題