범위 변수에 액세스 할 수없는 ng-bind

Question

ng-bind가 $ scope 변수에 액세스하지 않습니다. 뷰가로드되면 데이터가 렌더링되지 않습니다. 단지 비어 있지만 콘솔의 $ scope에있는 "showTopic"변수에서 액세스해야하는 모든 데이터를 볼 수 있습니다. 내가 잘못 가고있는 어떤 생각?

문제는 dashboard.html에서 topic.html로보기를 변경할 때 항목보기에서 발생합니다. 두보기 모두 동일한 컨트롤러를 사용하고 있습니다.

dashboard.html

<div ng-controller="topicsController"> 

<h2>DASHBOARD</h2> 

<button class="btn btn-danger" ng-click='getCookies()'>Cookies</button> 

<div class="col-sm-8 col-sm-offset-2"> 
    <table class="table table-striped"> 
     <thead> 
      <th>Category</th> 
      <th>Topic</th> 
      <th>Poster's Name</th> 
      <th>Posts</th> 
     </thead> 
     <tbody> 
      <tr ng-repeat="topic in topics track by $index"> 
       <td> <a href="" ng-click='showTopic(topic._id, $index)'> {{topic.category}} </a></td> 
       <td> {{topic.topic}} </td> 
       <td> {{topic.user}} </td> 
       <td> {{topic.posts}} </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

topic.html

<div ng-controller="topicsController"> 

<div class="col-sm-10 col-sm-offset-1"> 

    <h3><a href="">{{topicData.user}}</a> posted a topic:</h3> 

    <p>Desciption: {{ topicData.description }}</p> 

    <h4>Post your answer here...</h4> 
</div> 

topicsController.js

console.log("topicsController loaded"); 

app.controller('topicsController', ['$scope','topicFactory', '$location', '$cookies', function($scope, topicFactory, $location, $cookies) { 


var index = function(){ 
         topicFactory.index(function(returnedData){ 
          $scope.topics = returnedData; 
         }); 
      }; 
index(); 


    $scope.add = function(){ 
    var user = $cookies.get('user'); 
    $scope.addTopic.user = user 
    topicFactory.add($scope.addTopic, function(returnedData){ 
     index(); 
    }) 
    } 

    $scope.showTopic = function(id, $idx){ 
    topicFactory.show(id, function(returnedData){ 
     $scope.topicData = returnedData.data[0]; 
    }) 
    $location.url('/topic/' + $idx); 
    } 

}]); 

0

topicFactory.js

console.log("topicFactory loaded"); 

app.factory('topicFactory', ['$http', function($http) { 
     // The factory is nothing more than a function that returns an object 
function topicFactory(){ 

    var _this = this; 


    this.index = function(callback){ 
    console.log("index topicsFactory"); 
    $http.get('/topics').then(function(returned_data){ 
     topics = returned_data.data; 
     console.log(topics); 
     callback(topics) 
    }) 
    } 




    this.add = function(newTopic, callback){ 
    console.log(newTopic); 
    $http.post('/topics', newTopic).then(function(returned_data){ 
     console.log("posted"); 
     callback(returned_data); 
    }) 
    } 

    this.show = function(id, callback){ 
    console.log("show factory"); 
    $http.get('/topics/' + id).then(function(returned_data){ 
     console.log("got show data"); 
     callback(returned_data); 
    }) 
    } 
} 

    return new topicFactory(); 
}]); 

그리고 콘솔에서 범위의 showTopic 변수에 볼 수있는 데이터 :

showTopic:Object 
__v:0 
_id:"57eca48afd30cea088ffdf2f" 
category:"JavaScript" 
date:"2016-09-29T05:20:10.878Z" 
day:28 
description:"Test 6" 
month:9 
topic:"Test 6" 
user:"Test" 
year:2016 

Answer 1

는 문제는보기의 변화가 발생한다. 보기를 변경하면 범위가 변경됩니다. 올바른 범위 변수를 사용하여 dashboard보기에 범위가 있지만 topic보기에서는 실제로 비어 있습니다. 나는 당신이 객체를 로깅하고 있기 때문에 속이는 것처럼 보입니다. 따라서 뷰를 변경하고 다른 뷰/컨트롤러에서 범위 변수를 사용하려면 서비스에 객체를 저장 한 다음 컨트롤러에서 해당 객체를 반환하고 객체 필드를 범위 변수에 할당 한 다음 그 방법으로 표시해야합니다 , 당신이하고있는 일이지만, 당신은 두 개의 다른보기에 대해 동일한 컨트롤러를 사용하고 있습니다. 두 번째로드가 완료되면 빈 상태가되고 아무 것도 표시되지 않습니다.

나는 두 개의 다른 컨트롤러를 만드는 것이 좋습니다. 필요한 주제를 먼저 캡처하고 서비스에 전달하고 저장 한 다음 새 컨트롤러에서 호출하여 표시합니다. 두 가지 다른보기, 두 개의 다른 컨트롤러, 정보에 액세스하는 하나의 서비스.

this post을 살펴보고 각도 간의 경로를 각도로 전달하는 방법과보기가 범위에 미치는 영향을 이해할 것을 적극 권장합니다.