angularjs $scope.template 不会改变视图答案

【问题标题】：angularjs $scope.template doesnt change the viewangularjs $scope.template 不会改变视图
【发布时间】：2017-05-06 04:07:26
【问题描述】：

它以前工作过。我不知道我做了什么改变导致停止工作。这个想法是当我单击“Pesquisar”按钮时，我的控制器将获取数据，然后将视图更改为 main.html 。它工作得很好，但它简单地停止了工作。

index.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 -->

main.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 = "";

    });
};}]);

<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>

main.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>

【问题讨论】：

有这么多的代码通过一个plunk会很好。

标签： javascript angularjs controller frameworks frontend

【解决方案1】：

您目前在 login.html 的 body 和 div 上都有 ng-controller="MainCtrl as main"。这意味着将创建 MainCtrl 的两个实例，ng-include 将使用一个实例中的 template 变量，而另一个 template 变量是要更新的变量。

从login.html 中删除ng-controller="MainCtrl as main"。

另一方面，我强烈建议使用ngRoute 模块而不是ng-include 进行路由。

【讨论】：

非常感谢。我真傻。我尝试使用 ngRoute，但没有用。你再举个例子给我试试？几天前我开始学习 Angular。
不客气 :) 这是一个简单的例子：plnkr.co/edit/E7PLPb2MIIN9tT0qimQe?p=preview