Angular JS $scope 与 API http 响应的 MIME content-type 之间存在冲突？

Question

我正在玩一个 AngularJs 应用程序，通过 $http 使用 API REST with Slim PHP（下一步： $resource，我知道）。当控制器这样写时，从 API 检索数据时一切正常：

angular
    .module("adminTaller", ['ngRoute'])
           ...
    .controller("CustomersListController", ['$http', function($http){
        var ctrl = this;
        ctrl.customers = [];
        $http.get('api/customers')
            .success(function(data, status, headers, config){
                ctrl.customers = data;
            })
            .error(function (data, status, headers, config) {
                ...
            });
    }]);

'customers' 显示在此视图中：

<div ng-controller="CustomersListController as lstCtrl">
<input type="text" ng-model="searcher" />
<table>
    <thead>
    <tr>
        <th>Apellido y Nombres</th>
        <th>Domicilio</th>
        <th>TE Celular</th>
        <th>TE Comercial</th>
        <th>TE Domicilio</th>
        <th>Acciones</th>
    </tr>
    </thead>
    <tbody ng-repeat="customer in lstCtrl.customers | filter:searcher | orderBy: fullname">
    <tr>
        <td>{{ customer.fullname }}</td>
        <td>{{ customer.address }}</td>
        <td>{{ customer.cellphone }}</td>
        <td>{{ customer.businessphone }}</td>
        <td>{{ customer.homephone }}</td>
        <td><a href="#">Editar</a></td>
    </tr>
    </tbody>
</table>

但现在我用 $scope:

替换了 this

angular
  .module("adminTaller", ['ngRoute'])
                ...
  .controller("CustomersListController", ['$http', '$scope', function($http, $scope){
            var ctrl = $scope;
            ctrl.customers = [];
            $http.get('api/customers')
                .success(function(data, status, headers, config){
                    ctrl.customers = data;
                })
                .error(function (data, status, headers, config) {
                    ...
                });
        }])

，似乎什么都没发生（我的意思是，table 中没有加载 'customer list'），Batarang 给了我一个奇怪的警告（Chrome 的控制台什么也没说，如果Batarang 已禁用):

Resource interpreted as Script but transferred with MIME type application/x-js

我的 api/index.php 将 content-type 设置为 application/json :

$app = new Slim();

$app->response()->header('Content-Type', 'application/json');

$app->get('/customers', 'getCustomers');
$app->post('/customers', 'addCustomer');
$app->get('/customers/:id', 'getCustomer');
$app->put('/customers/:id', 'updateCustomer');
$app->delete('/customers/:id', 'deleteCustomer');

$app->run();

事实上，http 请求和 http 响应 headers 对我来说很好：

Remote Address:[::1]:8080
Request URL:http://localhost:8080/ng-taller/api/customers
Request Method:GET
Status Code:200 OK
**Request Headers**
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:es-ES,es;q=0.8,en;q=0.6,pt;q=0.4
Connection:keep-alive
Cookie:__ngDebug=true; PHPSESSID=b8cedd49edcc461fda62208e66cfb150; b8cedd49edcc461fda62208e66cfb150=DEFAULT%7C0%7C2M3TMlgUx3gTlaarYzHIdD28l8q9FTcNubt55%2BUGpAo%3D%7C7456bf61db3500c8bb7b3bc38082a470ce4a2ad3
Host:localhost:8080
Referer:http://localhost:8080/ng-taller/index.html
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36
**Response Headers**
Connection:Keep-Alive
Content-Length:1027
Content-Type:application/json
Date:Wed, 04 Mar 2015 00:26:12 GMT
Keep-Alive:timeout=5, max=97
Server:Apache/2.4.4 (Win32) OpenSSL/0.9.8y PHP/5.4.19
Set-Cookie:b8cedd49edcc461fda62208e66cfb150=DEFAULT%7C0%7C2M3TMlgUx3gTlaarYzHIdD28l8q9FTcNubt55%2BUGpAo%3D%7C7456bf61db3500c8bb7b3bc38082a470ce4a2ad3; path=/
X-Powered-By:PHP/5.4.19

当我用 Batarang 检查视图的 scope/model 时，它显示：

    { 
lstCtrl:  {  } 
customers: 
[  { 
id: 2
createdAt: 03-03-2015
fullname: Abelardini, Antonio Miguel
address: Virasoro Nº2533, Piso 3º - Rosario
cellphone: 341 (15)562-4484
businessphone: 341 430-4574
homephone: 
observations: 
logs: 
[  ]
errors: 0
 } ,  { 
id: 1
createdAt: 03-03-2015
fullname: Alvarez, Juan
address: Gallo Nº1254 (entre Nuria y Valdez) - Rosario
cellphone: 341 (15)485-6225
businessphone: 
homephone: 
observations: Puntual en el pago
logs: 
[  ]
errors: 0
 } ,  { 
id: 4
createdAt: 03-03-2015
fullname: Blanco de Escalada, María de las Mercedes
address: Av. Álvarez Thomas Nº1542, Piso 11º Depto.'A' - Rosario
cellphone: 341 (15)326-5484
businessphone: 
homephone: 
observations: 
logs: 
[  ]
errors: 0
 } ,  { 
id: 3
createdAt: 03-03-2015
fullname: Tirado López, Juan Manuel
address: Costanera Nº12 (Bajada de los Pescadores) - Rosario
cellphone: 341 (15)675-1125
businessphone: 
homephone: 3205 124-8586
observations: 
logs: 
[  ]
errors: 0
 }  ]
 }

Answer 1

我认为这与 mime 类型无关。

在您看来，您是否也将 'lstCtrl.customers' 更改为 'customers'？否则你指向的是一个什么都没有的控制器。

顺便说一下，您第一次使用的方法是更好的方法。首选使用 controllerAs 语法。

Angular JS $scope 与 API http 响应的 MIME content-type 之间存在冲突？

Conflict between Angular JS $scope and the MIME content-type of an API http response?

json

angularjs

angularjs-scope

mime-types