-1

我正在尝试获取 Angular js 的部分“下载”，以通过来自 Sinatra 的 JSON 从 MySQL 数据库中获取信息。我已经编写了下面的代码，但它不起作用，我想知道我在 app.rb 中的路由是否错误，或者是 Angular 中的控制器。

如果有人能帮我解决这个问题，那就太好了，因为我在网上找不到任何相关的教程。非常感谢。

在 app.rb 中

get "/#/view1/downloadData" do
 #get list of downloads for user
@download = Download.all(:order => [:downloadID], :limit => 20)

if @download
    @download.to_json
    #log to console if JSON pulled in correctly
    puts "get list of downloads successful"
else
    halt 404
    #log to console if JSON failed
    puts "get list of downloads JSON failed 404 displayed"
end
end

在 partials/downloads.html

<p>Manage downloads</p>
<ul ng-controller="MyCtrl1">
     <li>ID: {{download.title}}, Name: {{download.downloadID}}</li>
</ul>

在 js/controllers.js

//'use strict';

/* Controllers */

angular.module('myApp.controllers', []).
controller('MyCtrl1', [function($scope, $http) {

    //a scope function to load the data.
$scope = function () {
  $http.get('/#/view1/downloadData').success(function(data) {
     $scope.items = data;
     console.log(data);
     console.log("data got succesfully");
  });
};
}])
.controller('MyCtrl2', [function() {

}])
.controller('MyCtrl3', [function() {

 }]);
4

1 回答 1

1

我建议使用 JavaScript 调试器（例如 Chrome Developer Tool）来解决问题。问题中的代码有几个不同的问题，没有它就很难调试。通过使用 JS 调试器，您可以判断请求是否正确发出、是否发出到正确的 URL，以及您可以查看客户端和 sinatra 服务器之间传递的数据。

让我们看看所有的问题。

首先，控制器定义的语法错误，调试器会显示TypeError: Cannot set property...错误。请参阅有关缩小 Angular Doc 的注意事项。您需要将行更改为如下内容：

app.controller('MyCtrl1', ['$scope', '$http', function($scope, $http) {

第二个问题是旨在定义范围函数的行正在破坏范围。范围函数需要一个标识符：

$scope.loadData = function () { ... }

并且定义范围函数并不意味着它被调用。您可以添加如下调用：

$scope.loadData();

第三个问题是$http.get调用正在请求一个包含#字符的url，它表示一个URL的片段，它在很大程度上相当于GET /带参数的请求。没有充分的理由在#. 我会将其更改为/view1/downloadData. Sinatra 应用程序应该有相应的 GET 处理程序。

第四个问题是部分代码引用$scope.download，但处理程序$http.get正在success设置$scope.items。

最后，基于 Sinatra 代码，它返回一个 JSON 数组。渲染代码需要用于ng-repeat渲染所有项目。

JS代码

var app = angular.module('myApp', []);
app.controller('MyCtrl1', ['$scope', '$http', function($scope, $http) {
    // a scope function to load the data
    $scope.loadData = function() {
        $http.get('/view1/downloadData').success(function(data) {
            $scope.items = data;
        });
    }
    $scope.loadData();
}]);

HTML 代码

<body ng-controller="MyCtrl1">
<ul>
    <li ng-repeat="item in items">ID: {{item.title}}, Name: {{item.downloadID}}</li>
</ul>

简化的 Sinatra 代码

require 'sinatra'
require 'json'

get '/view1/downloadData' do
  # I'm guessing the database is returning something like this:
  [{'title' => 'title 1', 'downloadID' => 'ID 1'},
   {'title' => 'title 2', 'downloadID' => 'ID 2'}
  ].to_json
end
于 2013-10-28T11:20:32.600 回答