AngularJs 1无效

时间:2016-05-14 19:19:47

标签: javascript angularjs json

我试图从json文件中获取数据,但我不工作,我已经检查了这里的每个选项,但没有人为我工作,没有任何代码工作,我不知道我是否必须导入其他东西,并且json文件在同一级别的索引文件中,希望你能帮帮我

appClients.js

    (function(){
    var app = angular.module('customer',[]);
    alert('Success');
    app.controller("CustomerController",function($scope,$http){
        $http.get('../customer.json')
        .success(function(data) {
           // $scope.phones = data;
           alert('Success');
        })
        .error(function(data){
            alert('Error');
        });
    });
});

的index.html

<!DOCTYPE HTML>
<html ng-app="customer">
    <head>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css"  href="css/style.css">
    </head>
    <body class="Master" ng-controller="CustomerController as customer">
        <script type="text/javascript" src="js/angularjs.min.js"></script>
        <script type="text/javascript" src="js/appClients.js"></script>
        <header id="MasterHeader">

        </header>

        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="col-lg-6" id="CustomerList" ng-repeat="product in customer.clients">
                        <h3>{{product.id}}</h3>
                    </div>
                    <div class="col-lg-6" id="CustomerDetails">Details</div>
                </div>
            </div>
        </div>

        <footer id="MasterFooter">

        </footer>

    </body>
</html>

1 个答案:

答案 0 :(得分:4)

看起来你的IIFE(立即调用的函数表达式)没有被执行。将appClient.js文件更新为

(function(){
    var app = angular.module('customer',[]);
    alert('Success');
    app.controller("CustomerController",function($scope,$http){
        $http.get('../customer.json')
        .success(function(data) {
           // $scope.phones = data;
           alert('Success');
        })
        .error(function(data){
            alert('Error');
        });
    });
})();

请注意最后一行的额外()。这应该可以让你看到最初的成功&#34;警报。

如果您的ajax调用成功,则需要将$scope属性设置为将结果设置为与HTML中引用的$scope属性一致。根据当前代码段,您似乎将结果设置为控制器中的$scope.phone,但在HTML中引用$scope.customer