Угловое ng-bind, не получающее доступа к переменным области видимости

Question

ng-bind не имеет доступа к переменным $ scope. Когда просмотр загружается, данные не отображаются - он просто пуст, но я могу видеть все данные, которые мне нужно получить под переменной «showTopic» в области $ scope в консоли. Любые идеи, в которых я ошибаюсь?

Проблема возникает при просмотре темы, когда я следую за изменениями из 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); 
    } 

}]); 

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 и понять, как пропускать области между маршрутами в угловом и как виды влияют на область действия.