angularjs $scope.template 不改变视图

Question

它之前是有效的。我不知道我做了什么改变导致停止工作。我的想法是，当我单击 '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 = "";

    });
};}]);

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

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>

Answer 1

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

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

另一方面，我强烈建议使用 ngRoute 模块代替 ng-include。

angularjs $scope.template 不改变视图

angularjs $scope.template doesnt change the view

javascript

frontend

frameworks

controller

angularjs