Angularjs:为什么$ http永远不适合我?

时间:2013-05-16 22:10:43

标签: angularjs

当我使用jQuery的$.ajax时,它每次都有效,但当我回到Angularjs时,我写了

test.js

var readContracts = function($scope, $http){
    $http({method: 'GET', url: 'http://test.url.com/contracts'}).
    success(function(data, status, headers, config) {
     $scope.contracts = angular.fromJson(data);

    }).
    error(function(data, status, headers, config) {
    debugger;
    // called asynchronously if an error occurs
    // or server returns response with an error status.
    });
};    

test.html:

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
        <button ng-click="readContracts()">readContracts</button>
        <ul>
            <li ng-repeat="contract in contracts"> {{contract | json}} </li>
        </ul>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
        <script src="test.js"></script>
    </body>
</html>

它永远不会奏效。甚至连chrome调试器中的请求都没有: - (

专家可以在几秒钟内看到我做错了什么?

1 个答案:

答案 0 :(得分:2)

我认为问题是你没有控制器。

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body ng-controller="ContractsController">
        <button ng-click="readContracts()">readContracts</button>
        <ul>
            <li ng-repeat="contract in contracts"> {{contract | json}} </li>
        </ul>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">     </script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js">    </script>
        <script src="test.js"></script>
    </body>
</html>


 function ContractsController($scope, $http){
    $scope.readContracts = function(){
        $http({method: 'GET', url: 'http://test.url.com/contracts'}).
        success(function(data, status, headers, config) {
             $scope.contracts = angular.fromJson(data);

        }).
        error(function(data, status, headers, config) {
        debugger;
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        });
    };
   };