它以前在工作。我不知道我改变了什么,使停止工作。这个想法是当我单击"Pesquisar"按钮时,我的控制器将获取数据,然后将视图更改为 main.html . 它工作得很好,但它只是停止了工作。
索引.html
<body ng-app="mundiApp" ng-controller="MainCtrl as main">
<div ng-include="template"></div>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
主.js - 控制器
'use strict';
angular.module('mundiApp') .controller('MainCtrl',['$scope','$http', function($scope, $http) {
var vm = this;
$scope.username ="";
$scope.template = "/views/login.html";
this.pesquisarUsuario = function(usuario){
$http({
method: 'GET',
url: 'https://api.github.com/users/'+usuario + '/repos'
}).then(function successCallback(response) {
vm.login = response.data[1].owner.login;
vm.foto = response.data[1].owner.avatar_url;
vm.url = response.data[1].owner.html_url;
var projects = [];
$(response.data).each(function() {
projects.push({
name: this.name,
url: this.html_url,
forks: this.forks_count,
stars: this.stargazers_count,
contributors: 11, //usar api pra pegar response.data.contributors_url
commits: 101, //'https://api.github.com/repos/'+usuario +'/'response.data.name+'/commits'
});
});
vm.projects = projects;
$scope.template = "";
});
};}]);
登录.html
<div class="login">
<div class="painel" ng-controller="MainCtrl as main">
<form class="form-group">
<label for="Search">Usuário</label><br/>
<input type="text" class="form-control" ng-model="usuario" placeholder="Digite o usuario">
<br/>
<button class="btn btn-primary form-control" ng-click="main.pesquisarUsuario(usuario)" >Pesquisar</button>
</form>
</div>
主.html
<div class="container">
<header>
<!--foto -->
<div class="foto"></div>
<div class="titulo"></div>
</header>
<div class="projeto" >
<div class="projeto-header">
<h2>Project Name</h2>>
</div>
<div class="grafico">
</div>
您目前在正文和div 上都有ng-controller="MainCtrl as main"
login.html
.这意味着将创建两个MainCtrl
实例,并且ng-include
将使用一个实例中的template
变量,而另一个template
变量是要更新的变量。
从login.html
中删除ng-controller="MainCtrl as main"
。
另一方面,我强烈建议使用ngRoute
模块进行路由而不是ng-include
.