为什么我的UI网格无法加载网格

时间:2017-07-08 18:18:03

标签: angularjs angular-ui-grid ui-grid

Here is my runnable plunker

我按照UI Grid official tutorial中的教程进行操作。 我不知道为什么我无法加载网格。我没有发现任何语法错误。

以下是控制台错误的一部分:

  

访问过的网址/   editor-1.2.0.js:2访问过的URL /?p =目录   emmet.js无法加载资源:服务器响应状态为404(未找到)   editor-1.2.0.js:7 AUTH对象   editor-1.2.0.js:2事件跟踪Plunk Beautify Toolbar undefined undefined   editor-1.2.0.js:2事件跟踪Plunk Save Toolbar undefined undefined   editor-1.2.0.js:2访问过的URL / oXEt5IfdrpkkPSxysncy?p = catalog   editor-1.2.0.js:2事件跟踪多窗格显示预览工具栏未定义未定义   editor-1.2.0.js:2访问过的网址/ oXEt5IfdrpkkPSxysncy?p =预览   run.plnkr.co/:1混合内容:' https://plnkr.co/edit/oXEt5IfdrpkkPSxysncy?p=preview'是通过HTTPS加载的,但请求了一个不安全的脚本' http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js'。此请求已被阻止;内容必须通过HTTPS提供。

<!DOCTYPE html>
<html ng-app="app">

<head>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
</head>

<body>
    <h1>Hello Plunker!</h1>

    <div ng-controller="MainCtrl">
        <div ui-grid="{ data: myData }" class="myGrid"></div>
    </div>

    <script>
        var app = angular.module('app', ['ui.grid']);
        app.controller('MainCtrl', ['$scope', function($scope) {
            $scope.myData = [{
                    "firstName": "Cox",
                    "lastName": "Carney",
                    "company": "Enoromo",
                    "employed": true
                }, {
                    "firstName": "Lorraine",
                    "lastName": "Wise",
                    "company": "Comveyer",
                    "employed": false
                }, {
                    "firstName": "Nancy",
                    "lastName": "Waters",
                    "company": "Fuelton",
                    "employed": false
                }
            ];
        }])
    </script>

    <style>
        .myGrid {
            width: 500 px;
            height: 250 px;
        }
    </style>
</body>

</html>

1 个答案:

答案 0 :(得分:1)

你的ui-grid的cdn不正确。你所有的src应该指向一个安全的URL,即 https 。原因是您试图从安全站点访问不安全的脚本。这将被阻止,因为内容只能通过HTTPS提供。

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.min.js"></script>
  </head>

工作Plunkr https://plnkr.co/edit/I87wgFzlqmtl6dcPem6F?p=preview