Question

我正在使用this jQuery plugin构建一个简单的Angular屏幕截图生成器。

这是我的 index.html 文件：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <title>Angular Screenshot</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
</head>

<body>
    <div ng-controller="myCtrl">
        <form ng-submit="submit()">
            <label>URL:</label>
            <input type="text" placeholder="Insert URL" ng-model="url" autofocus id="urlbox">
            <br/><br/>
            <input type="submit" value="Generate Screenshot" id="submitbtn">
        </form>
        <!-- screenshot -->
        <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" data-url="{{url}}">
    </div>
    <script type="text/javascript" src="url2img.js"></script>
    <script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
        $scope.submit = function() {
            // I stuck here
        }
    });
    </script>
</body>
</html>

这是我的 url2img.js 文件：

$(window).load(function() {

    $('img[data-url]').each(function() {
        $.ajax({
            url: 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=' + $(this).data('url') + '&screenshot=true',
            context: this,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                data = data.screenshot.data.replace(/_/g, '/').replace(/-/g, '+');
                $(this).attr('src', 'data:image/jpeg;base64,' + data);
            }
        });
    });


});

当我打开页面时，我在控制台中收到此错误：

GET https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=&screenshot=true 400 (Bad Request)

当我在data-url内部对目标网址进行硬编码时，它的工作正常。但是当我放{{url}}时，错误就出现了。

如何解决此问题并仅在我点击ng-model="url"按钮后将data-url数据传递到Generate Screenshot？

Answer 1

为什么要使用jQuery？

    public class Spawn {

    Roundabout roundabout = new Roundabout();

    public void spawnPedestrian(){
        Pedestrian p = new Pedestrian(50,50);

        System.out.println("Spawn me ");


        roundabout.surface.add(p);
        roundabout.surface.revalidate();
        roundabout.surface.repaint();
        roundabout.revalidate();
        roundabout.repaint();

    }
}

然后使用$scope.submit = function() { var url = 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=' + encodeURIComponent($scope.url) + '&screenshot=true'; $http.get(url) .success(function(data) { data = data.screenshot.data.replace(/_/g, '/').replace(/-/g, '+'); $scope.src = 'data:image/jpeg;base64,' + data; }); }。

Angular截图生成器

1 个答案: