AngularJS$scope.template不会改变视图



它以前在工作。我不知道我改变了什么,使停止工作。这个想法是当我单击"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.

最新更新