Das Szenario, das ich habe, ist eine dynamische Tabelle mit Javascript erstellen, indem Sie die Daten aus dem Skript-Tag übergeben. Mein JavaScript-Code analysiert den bereitgestellten JSON und generiert den Tabellenheader und den Tabellenkörper. Der Tabellenkörper wird zusammen mit den Tags erzeugt, die für die Winkelbindungsmethode {{variable_name}} erforderlich sind.Wie binden Sie Scope-Daten an Modelle, die dynamisch mit Javascript generiert werden?
Aber nachdem das DOM erstellt wird, muss ich den Bereich erneut auf ng-repeat der Tabelle anwenden.
<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>
Die dom Elemente erstellt sind - 
Die aktuelle Ausgabe ich immer bin, ist wie - 
Aber das Problem ist, dass Winkel bindet alle an ihrem Code Zeit-Rendering. Wie kann ich die $scope.watch Methode oder $scope.apply Methode verwenden, um dies nach dem Ausführen von Javascript zu tun. Ich habe versucht, dies mit
angular.element (document) .ready (function()) zu tun
aber das ist nicht der richtige Weg, nehme ich an.
Ich bin neu in eckigen. Bitte führen Sie mich. Vielen Dank!
binden möchten shouldn Sie Erschaffe das dom nicht mit jQuery. Die Daten sollten in einen Controller übergeben werden und lassen Sie die Dom – charlietfl
Ich würde alle Ihre js Logik in den Winkel-Controller setzen, um mit –
Beginnen Sie stark zu lesen [Thinking-in-angularjs-wenn-ich-habe-ein-jquery -background] (http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – charlietfl