如何将范围数据绑定到使用 Javascript 动态生成的模型？

Question

我的场景是通过传递从脚本标签传递的数据使用 javascript 创建动态表。我的 javascript 代码解析提供的 json 并生成表头和表体。表格体与角度绑定方法{{variable_name}}所需的标签一起生成。

但是在创建 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 元素如下 -

我得到的当前输出是 - 但问题是 Angular 在渲染时绑定了它的所有代码。 javascript 完成后，如何使用$scope.watch 方法或$scope.apply 方法完成此操作。 我正在尝试使用

angular.element(document).ready(function ())

但这不是我认为的正确方法。
我是角度的新手。请指导我。谢谢！

Answer 1

你可以在渲染 DOM 树后引导 Angular。只需从部分中删除 ng-app 并将此代码放在第一个脚本的末尾：

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

当然，使用更好的方法来选择要绑定 ng-app 的元素