angularjs $ scope.template가 뷰를 변경하지 않습니다.

이전에는 작동했습니다. 내가 무엇을 바꾸 었는지 모르겠다. 아이디어는 '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>

출처

2016-12-20 Camillo Dev

이 코드를 사용하면 큰소리로 들어갈 수 있습니다. – jbrown

현재 몸과 login.html의 사업부에 모두 ng-controller="MainCtrl as main" 있습니다. 즉, MainCtrl의 두 인스턴스가 만들어지고 은 template 변수가 한 인스턴스에서 사용되고 다른 template 변수가 업데이트 중임을 의미합니다.

ng-controller="MainCtrl as main"을 login.html에서 제거하십시오.

또 다른 참고 사항으로,은 내재 된 라우팅 대신 ngRoute 모듈을 사용하는 것이 좋습니다.

출처

2016-12-20 21:02:28 tasseKATT

고맙습니다. 그것은 내 바보 같았다. ngRoute를 사용하려고했지만 작동하지 않았습니다. 한 번 더 시험해 보시겠습니까? 나는 며칠 전에 Angular를 배우기 시작했다. –

당신은 환영합니다 :) 여기 간단한 예제가 있습니다 : http://plnkr.co/edit/E7PLPb2MIIN9tTqqQQ?p=preview – tasseKATT

감사합니다 !!!!!!!!! –

angularjs $ scope.template가 뷰를 변경하지 않습니다.

답변

관련 문제