Javascript Angularjs-控制器和视图之间的绑定_Javascript_Angularjs

Javascript Angularjs-控制器和视图之间的绑定

javascript angularjs

Javascript Angularjs-控制器和视图之间的绑定,javascript,angularjs,Javascript,Angularjs,我对Angularjs视图有问题。不知何故，我做错了什么，不知道问题出在哪里。希望有人能帮我问题是，{{user.login}（userRepoInfo.html文件）根本不会从控制器中调用，如果我调用了console.log，则会从服务中恢复正常。我肯定在视图和控制器之间做错了什么 I have five files 1) gitHubApiServices.js 2) gitHubApiController.js 3) userRepoInfo.html 4) app.js 5) ind

我对Angularjs视图有问题。不知何故，我做错了什么，不知道问题出在哪里。希望有人能帮我

问题是，

{{user.login}

（userRepoInfo.html文件

）根本不会从控制器中调用，如果我调用了console.log，则会从服务中恢复正常。我肯定在视图和控制器之间做错了什么

I have five files
1) gitHubApiServices.js 
2) gitHubApiController.js
3) userRepoInfo.html
4) app.js
5) index.html

下面是gitHubApiServices.js

  (function() {
                var gitHubApiFactory = function($http) {

                    var factory = {};
                    factory.getUserName = function(userName) {
                        console.log(userName + " " + "This is from Services")
                        return $http.get("https://api.github.com/users/" + userName);
                    };
                    return factory;
                };

                gitHubApiFactory.$inject = ['$http'];

                angular.module('gitHubApp').factory('gitHubApiFactory',gitHubApiFactory);

            }());

下面是gitHubApiController.js

 (function() {

            var gitHubInfoController = function ($scope,gitHubApiFactory) {
                $scope.user = null;
                $scope.gitHubUser = function(userName) {
                    gitHubApiFactory.getUserName(userName)
                        .success(function (data) {
                            $scope.user = data;
                            console.log(data);
                        })
                        .error(function(data, status, headers, config) {
                            $log.log(data.error + ' ' + status);
                        });
                }
            };

            gitHubInfoController.$inject = ['$scope','gitHubApiFactory'];

            angular.module('gitHubApp')
                .controller('gitHubInfoController', gitHubInfoController);
        }());

下面是userRepoInfo.html

 <div data-ng-controller="gitHubInfoController">
                <h1>Github App</h1>
                <input type="text" id="gitUserName" ng-model="gitUser" placeholder="Please enter your GitHub Username">
                <a href="#" id="getUserRepo" ng-click="gitHubUser(gitUser)">Get my Repository</a>

                {{user.login}}
            </div>

下面是index.html

<!doctype html>
<html data-ng-app="gitHubApp">
<head>
    <title>Github Repository App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

    <div data-ng-view></div>


<script src="vendor/angular.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="app/app.js"></script>

<script src="app/controllers/gitHubApiController.js"></script>
<script src="app/services/gitHubApiServices.js"></script>
</body>
</html>


Github存储库应用程序

请帮我解决这个问题。我花了几个小时，但运气不好

感谢您的努力

我已经用 {{user.login} 而不是plinkr中的

{{$scope.user.login}

，它工作正常。它返回我的用户名（或我从GitHub RestFull Api请求的任何其他信息）

您不应在视图中使用

$scope

。Angular将为您配置适当的范围，并将其插入视图中使用

请看一下这个plunkr：

注意：为了简单起见，我已将您的文件夹结构展平。

如果在我的控制器I do console.log（user.login）中，您在控制台中遇到了什么错误它给了我参考错误：用户没有定义-不知何故它是空的。我已经定义了我的控制器。我对angularjs非常陌生。所以可能做错了？嗨，很抱歉，这是一个输入错误，应该是$scope.user=null；我已经修复了它，谢谢

console.log（user.login）

给出错误，因为未定义

用户

，因此您必须使用

控制台.log（$scope.user.login）

您好，我现在知道问题出在我使用的链接标签上。谢谢阿里。非常感谢

<!doctype html>
<html data-ng-app="gitHubApp">
<head>
    <title>Github Repository App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

    <div data-ng-view></div>


<script src="vendor/angular.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="app/app.js"></script>

<script src="app/controllers/gitHubApiController.js"></script>
<script src="app/services/gitHubApiServices.js"></script>
</body>
</html>