角度控制器似乎不起作用答案

【问题标题】：Angular Controller doesn't seem to work角度控制器似乎不起作用
【发布时间】：2018-05-19 06:51:36
【问题描述】：

我正在使用 AngularJs 构建一个简单的单页应用程序，它检索存储在基于服务器的应用程序上的数据。以下是我正在使用的文件：

index.html：

<!DOCTYPE html>
<html ng-app="Js-Users-App">

<head>
    <meta charset="utf-8">
    <title>Js Users</title>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css">
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>

</head>
<body>
    <nav class="white" role="navigation">
        <div class="nav-wrapper container">
            <a id="logo-container" href="#/" class="brand-logo">Js Users</a>
            <ul class="right hide-on-med-and-down">
                <li><a href="#/add">Add</a></li>
            </ul>

            <ul id="nav-mobile" class="side-nav">
                <li><a href="#/add">Add</a></li>
            </ul>
            <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
        </div>
    </nav>

    <div class="container">
        <div ng-view></div>
    </div>



    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/angular-route/angular-route.min.js"></script>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/materialize-css/dist/js/materialize.min.js"></script>

    <script type="text/javascript" src="app/app.js"></script>
    <script type="text/javascript" src="app/main/main.js"></script>
    <script type="text/javascript" src="app/user-data-factory/user-data-factory.js"></script>

</body>
</html>

main.html：

<div class="page-header">
   <h2 id="tables">Pagination in Angular Js</h2>
</div>
<div ng-controller="UsersList">
    <table class="table striped">
        <thead>
            <tr>
                <th>Last Name</th>
                <th>First Name</th>
                <th>Created At</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="user in users">
                <td>{{user.last_name}}</td>
                <td>{{user.first_name}}</td>
                <td>{{user.created_at}}</td>
                <td>{{user.status}}</td>
            </tr>
        </tbody>
    </table>
</div>

main.js：

angular.module('Js-Users-App', []).controller('UsersList', UsersList);

function UsersList($scope){
    $scope.users = [];

    userDataFactory.userList().then(function(response) {
        $scope.users = response.data;
    });
}

user-data-factory.js：

angular.module('Js-Users-App').factory('userDataFactory', userDataFactory);

function userDataFactory($http) {
    return {
        userList: userList
    };

    function userList() {
        return $http.get("users.json").then(complete).catch(failed);
    }

    function complete(response) {
        return response;
    }

    function failed(error) {
        console.log(error.statusText);
    }
}

app.js：

var app = angular.module("Js-Users-App", ["ngRoute"]).config(config);

function config($routeProvider) {

    $routeProvider
    .when("/", {
      templateUrl: "app/main/main.html"
    })
    .when("/add", {
      templateUrl: "app/addUser/addUser.html"
    })
    .otherwise({
      redirectTo: "/"
    });
}

我已经启动了一个服务器，但应用程序只显示导航栏，没有表格。我也检查了控制台，但它没有显示任何错误或警告。此外，我尝试使用 console.log 打印一些消息，但是没有显示任何消息。该应用程序在一个简单的 Web 服务器上运行，以 python -m SimpleHTTPServer 开头。我到处检查过，但似乎没有任何错字。此外，文件的路径似乎是正确的。你认为问题出在哪里？我还是 AngularJs 的新手，所以，我可能无法正确调试。谢谢。

【问题讨论】：

在 main.js 中，你重新定义了模块而不是使用它。用 `angular.module('Js-Users-App') 替换 angular.module('Js-Users-App', [])。另外，你没有将你的工厂注入你的控制器，所以这将是一个问题。
我没有看到 userDataFactory 作为依赖加载，不确定，你是如何在控制器中调用它的方法
这就是问题所在。我已经通过删除[] 来修复它，并将userDataFactory 作为依赖项加载。

标签： angularjs angularjs-scope ngroute

【解决方案1】：

正如 cmets 中所说，您需要在控制器中注入 userDataFactory 作为依赖项。

然后，不要忘记使用 $inject 注入依赖项。

另外一点，不需要在你的模块使用中指定一个依赖注入数组。 angular.module('Js-Users-App', []) 变为 angular.module('Js-Users-App')。

angular.module('Js-Users-App').controller('UsersList', UsersList);

UsersList.$inject = ['$scope', 'userDataFactory'];

function UsersList($scope, userDataFactory){
    $scope.users = [];

    userDataFactory.userList().then(function(response) {
        $scope.users = response.data;
    });
}

【讨论】：