未在路由html页面中获取ag网格_Html_Angularjs_Ag Grid

未在路由html页面中获取ag网格

html angularjs ag-grid

未在路由html页面中获取ag网格,html,angularjs,ag-grid,Html,Angularjs,Ag Grid,我正在尝试在我的HTML页面new.HTML上获取ag网格，单击old.HTML页面后，该网格将加载到视图中new.html将通过角根加载 old.html如下所示： <html lang="en"> <head> <meta charset="UTF-8"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"><

我正在尝试在我的HTML页面new.HTML上获取ag网格，单击old.HTML页面后，该网格将加载到视图中new.html将通过角根加载

old.html如下所示：

<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    <script src="ag-grid.js"></script>
    <script>
        var module = angular.module("sampleApp", ['ngRoute']);
        module.config(['$routeProvider',
        function($routeProvider) {
            $routeProvider.
                when('/route1', {
                    controller: 'myCtrl',
                    templateUrl: 'new.html'
                }).
                otherwise({
                    redirectTo: '/'
                });
        }]);
        module.controller("myCtrl", function($scope) {
            document.addEventListener('DOMContentLoaded', function() {
                var gridDiv = document.querySelector('#myGrid');
                var gridOptions = {
                    columnDefs: [
                        {headerName: 'Name', field: 'name'},
                        {headerName: 'Role', field: 'role'}
                    ],
                    rowData: [
                        {name: 'Niall', role: 'Developer'},
                        {name: 'Eamon', role: 'Manager'},
                        {name: 'Brian', role: 'Musician'},
                        {name: 'Kevin', role: 'Manager'}
                    ]
                };
                new agGrid.Grid(gridDiv, gridOptions);
            });
        });
    </script>
</head>
<body ng-app="sampleApp">
    <div> 
        <a href="#/route1" role="button">Route</a> 
        <div ng-view></div>
    </div> 
</body>

<html>
<head lang="en">
    <meta charset="UTF-8"/>
</head>
<body>
    <div id="myGrid" style="width: 500px; height: 200px;" class="ag-fresh"></div>
</body>


var module=angular.module（“sampleApp”，['ngRoute']）；
module.config（['$routeProvider'，
函数（$routeProvider）{
$routeProvider。
当（“/route1”{
控制器：“myCtrl”，
templateUrl:'new.html'
}).
否则({
重定向到：'/'
});
}]);
模块控制器（“myCtrl”，函数（$scope）{
document.addEventListener（'DOMContentLoaded'，function（）{
var gridDiv=document.querySelector（“#myGrid”）；
变量gridOptions={
columnDefs：[
{headerName:'Name'，field:'Name'}，
{headerName:'Role'，field:'Role'}
],
行数据：[
{name:'Niall'，role:'Developer'}，
{name:'Eamon'，role:'Manager'}，
{名字：'布莱恩'，角色：'音乐家'}，
{姓名：'Kevin'，角色：'Manager'}
]
};
新的agGrid.Grid（gridDiv，gridOptions）；
});
});

new.html如下所示：

<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    <script src="ag-grid.js"></script>
    <script>
        var module = angular.module("sampleApp", ['ngRoute']);
        module.config(['$routeProvider',
        function($routeProvider) {
            $routeProvider.
                when('/route1', {
                    controller: 'myCtrl',
                    templateUrl: 'new.html'
                }).
                otherwise({
                    redirectTo: '/'
                });
        }]);
        module.controller("myCtrl", function($scope) {
            document.addEventListener('DOMContentLoaded', function() {
                var gridDiv = document.querySelector('#myGrid');
                var gridOptions = {
                    columnDefs: [
                        {headerName: 'Name', field: 'name'},
                        {headerName: 'Role', field: 'role'}
                    ],
                    rowData: [
                        {name: 'Niall', role: 'Developer'},
                        {name: 'Eamon', role: 'Manager'},
                        {name: 'Brian', role: 'Musician'},
                        {name: 'Kevin', role: 'Manager'}
                    ]
                };
                new agGrid.Grid(gridDiv, gridOptions);
            });
        });
    </script>
</head>
<body ng-app="sampleApp">
    <div> 
        <a href="#/route1" role="button">Route</a> 
        <div ng-view></div>
    </div> 
</body>

<html>
<head lang="en">
    <meta charset="UTF-8"/>
</head>
<body>
    <div id="myGrid" style="width: 500px; height: 200px;" class="ag-fresh"></div>
</body>

当我分别执行old.html时，将myCtrl控制器代码保留在脚本标记中，并在new.html中保留一个函数，它运行良好，网格与数据填充一起显示。但在布线视图中，栅格未显示。我希望在点击old.html中的链接时显示网格
请帮我解决这个问题。谢谢