如何將範圍數據綁定到使用Javascript動態生成的模型？

我的場景是通過傳遞腳本標記傳遞的數據來使用javascript創建動態表。我的JavaScript代碼解析提供的json並生成表頭和表體。生成表體以及角度綁定方法{{variable_name}}所需的標籤。如何將範圍數據綁定到使用Javascript動態生成的模型？

但是在創建DOM之後，我需要將範圍重新應用到表ng-repeat。

<html> 
<head> 
<title>dynamic table</title> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 
    <script src="js/angular.min.js"></script> 
    <script src="js/jquery.min.js"></script> 

<script type="text/javascript"> 
var orderByField = "impressions"; 
var reverseSort = "false"; 
var myList = [{firstName: 'John',lastName: 'Doe',age: 30,etc : 'heelo'},{firstName: 'Frank',lastName: 'Burns',age: 54,etc: 'world'},{firstName: 'Sue',lastName: 'Banter',age: 21,etc: 'cool'},{firstName: 'Frank',lastName: 'Burns',age: 54,etc: 'world'},{firstName: 'Frank',lastName: 'Burns',age: 54,etc: 'world'},{firstName: 'Frank',lastName: 'Burns',age: 54,etc: 'world'},{firstName: 'Frank',lastName: 'Burns',age: 54,etc: 'world'},{firstName: 'Frank',lastName: 'Burns',age: 54,etc: 'world'},{firstName: 'Frank',lastName: 'Burns',age: 54,etc: 'world'},{firstName: 'Frank',lastName: 'Burns',age: 54,etc: 'world'},{firstName: 'Frank',lastName: 'Burns',age: 54,etc: 'world'},{firstName: 'Frank',lastName: 'Burns',age: 54,etc: 'world'},{firstName: 'Frank',lastName: 'Burns',age: 54,etc: 'world'},{firstName: 'Frank',lastName: 'Burns',age: 54,etc: 'world'},{firstName: 'Frank',lastName: 'Burns',age: 54,etc: 'world'}]; 


function addAllColumnHeaders(myList, selector) 
{ 
    var columnSet = []; 
    var headerTr$ = $('<tr/>'); 
    var aStart = '<a href="#" ng-click="orderByField=\''; 
    var aMid = '\'; reverseSort = !reverseSort">'; 
    var aEnd = '</a>'; 

    for (var i = 0 ; i < myList.length ; i++) { 
     var rowHash = myList[i]; 
     for (var key in rowHash) { 
      keyLink = aStart+key+aMid+key+aEnd; 
      if ($.inArray(key, columnSet) == -1){ 
       columnSet.push(key); 
       headerTr$.append($('<th/>').html(keyLink)); 
      } 
     } 
    } 
    $(selector).append(headerTr$); 
    return columnSet; 
} 

function createAngularTableDataPlaceholder(myList, selector) 
{ 
    var columnSet2 = []; 
    var headerTr2$ = $('<tr/>').attr('ng-repeat','field in myList|orderBy:orderByField:reverseSort'); 
    var aStart2 = '<td>{{field.'; 

    var aEnd2 = '}}</td>'; 

    for (var i = 0 ; i < myList.length ; i++) { 
     var rowHash2 = myList[i]; 
     for (var key2 in rowHash2) { 
      keyLink2 = aStart2+key2+aEnd2; 
      //alert(keyLink); 
      if ($.inArray(key2, columnSet2) == -1){ 
       columnSet2.push(key2); 
       headerTr2$.append($('<td/>').html(keyLink2)); 
      } 
     } 
    } 
    $(selector).append(headerTr2$); 
    return columnSet2; 
} 
</script> 
</head> 
<body> 
<div class="container"> 
<section ng-app="app" ng-controller="MainCtrl" ng-init="getMember(myList)"> 
<table class="table" id="excelDataTable" border="1"> 
      <thead id="thead"> 

      </thead> 
      <tbody id="tbody"> 
       <!--tr ng-repeat="field in myList|orderBy:orderByField:reverseSort"> 

       </tr--> 
      </tbody> 
    </table> 
    </section> 
    </div> 

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

     app.controller('MainCtrl', ['$scope', '$window', function($scope, $window) {   

       addAllColumnHeaders(myList, '#thead'); 
       createAngularTableDataPlaceholder(myList, '#tbody'); 
       console.log("header and columns done"); 

       $scope.orderByField = $window.orderByField; 
       console.log($scope.orderByField); 

       $scope.reverseSort = false; 
       console.log($scope.reverseSort); 

       angular.element(document).ready(function() { 
       $scope.myList = $window.myList; 
       console.log("got "+$scope.myList); 
      }); 

     }]);  
    </script> 

</body> 
</html>

創建的DOM元素作爲 -

電流輸出我得到是 - 但問題是，角結合其所有的渲染時間碼。如何在JavaScript完成後使用$scope.watch方法或$scope.apply方法來完成此操作。我試圖做到這一點使用

angular.element（文件）。就緒（函數（））

，但是這不是正確的方式，我想。
我是新角度。請指導我。謝謝！

來源

2016-07-15 devutkarsh

var elem = document.querySelector('section'); angular.bootstrap(elem, 'app');

當然，用更好的方式來選擇你的元素你不應該首先用jQuery創建dom。數據應該傳遞到控制器，並讓角度生成dom – charlietfl

我會把你所有的js邏輯放在角度控制器中，以 –

開頭。強烈建議閱讀[thinking-in-angularjs-if-i-have-a-jquery -background]（http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background） – charlietfl

您可以在DOM樹渲染後引導角。剛剛從節中刪除NG-應用程序，並把這個代碼在第一個腳本的末尾：在要NG-應用程序綁定到

來源

2016-07-15 19:51:42

所有這些都會在設置不當的應用程序上投入創可貼 – charlietfl

感謝@bohdan，這是我如何修補我相信的代碼。我在該部分添加了一個id，用於正確選擇節標記，並試圖使用bootstrapping，但沒有成功。我應該把這個放在哪裏？ – devutkarsh

@devutkarsh，在第一個代碼的末尾。但可能現在你的角度模塊代碼應該先行。所以第一個腳本標籤angular.module（'app'）...第二個腳本 - 你的dom渲染。但是使用控制檯也會更好。通常角度投擲可理解的錯誤，你應該讀它 –

如何將範圍數據綁定到使用Javascript動態生成的模型？

回答

相關問題