gpt4 book ai didi

javascript - Angularjs - Controller 和 View 之间的绑定(bind)

转载 作者:行者123 更新时间:2023-12-03 11:47:30 25 4
gpt4 key购买 nike

我在使用 Angularjs View 时遇到问题。不知怎的,我做错了什么,不知道问题出在哪里。希望有人能帮助我。

问题是 {{user.login}} (userRepoInfo.html file) 根本不会从 Controller 调用,如果我执行 console.log 它服务很好。我肯定在 View 和 Controller 之间做错了什么

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>

下面是app.js

(function() {

var app = angular.module('gitHubApp', ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'gitHubInfoController',
templateUrl: 'app/views/userRepoInfo.html'
})
.otherwise( { redirectTo: '/' } );
});

}());

下面是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>

请帮我解决这个问题。我花了几个小时但没有运气。

谢谢你的努力

最佳答案

我已经尝试过你的代码 {{用户登录}}而不是 plinkr 中的 {{$scope.user.login}} 并且它工作正常。它返回我的用户名(或我从 GitHub RestFull Api 请求的任何其他信息。

您不应在 View 中使用$scope。 Angular 将为您找出正确的范围并将其注入(inject)以供 View 使用。

看看这个plunkr:http://plnkr.co/edit/16yyngPoZBgzVvfyWCDq

P.S:为了简单起见,我已经扁平化了您的文件夹结构。

关于javascript - Angularjs - Controller 和 View 之间的绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25985530/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com