AngularJs 1 not working

本文关键字：working not AngularJs 更新时间：2023-09-26

我试图从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>

看起来您的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');
        });
    });
})();

注意最后一行的附加()。这应该可以让您看到最初的"成功"警报。

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