Angularjs-控制器和视图之间的绑定
Angularjs - Binding between controller and view
我对Angularjs视图有问题。不知怎么的,我做错了什么,不知道哪里出了问题。希望有人能帮我。
问题是{{user.login}}
((userRepoInfo.html file
)根本不会从控制器调用,如果我执行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>
下面是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>
请帮我解决这个问题。我花了几个小时,但运气不好。
感谢您的努力
我已经用{{user.login}}而不是plinkr中的CCD_ 3,并且工作良好。它返回我的用户名(或我从GitHub RestFull Api.请求的任何其他信息
不应在视图中使用$scope
。Angular将为您指定合适的范围,并将其注入以供视图使用。
看看这个庞克:http://plnkr.co/edit/16yyngPoZBgzVvfyWCDq
附言:为了简单起见,我把你的文件夹结构弄平了。
相关文章:
- JavaScriptV5中的绑定和JQuery之间有任何关系吗
- 直接绑定和使用每个函数之间的区别
- 工厂和控制器之间的“绑定”
- 隔离作用域+绑定名称和仅在AngularJS中的隔离作用域之间的差异
- 绑定返回的结果和使用function()的结果之间有什么区别
- 父关系指令和子关系指令之间的绑定
- 控制器和外部指令之间的双向数据绑定
- AngularJS:图片上传+文件阅读器预览.控制器、指令和作用域之间的绑定出现问题
- 在 Angular 中的控制器之间绑定数据
- ExtJS:网格和表单之间的双向绑定
- AngularJS Modal 中控制器之间的双向绑定
- 两个网络组件之间的绑定:谷歌地图+地理定位
- jQuery和纯Javascript中的指针事件绑定之间的区别
- 尝试实现 ng-repeate 和表单之间的双向绑定
- 为什么角度绑定在传入时会中断指令之间的绑定
- 发布绑定/监视两个控制器之间共享的服务变量
- 指令之间没有数据绑定's的范围及其's模板
- Angularjs-控制器和视图之间的绑定
- AngularJS如何在服务和控制器之间建立双向数据绑定
- 用JavaScript将事件侦听器绑定到特定日期和时间之间的提交表单