Angular 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);
  }

}]);

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 视图中实际上是空的。我知道它看起来是骗人的，因为您正在记录对象。因此，如果您正在更改视图并希望使用来自另一个 view/controller 的范围变量，您将希望将对象保存在服务中，然后在控制器中 return 该对象，将对象字段分配给您的范围变量并以这种方式显示它，这就是您正在做的，但是您对两个不同的视图使用相同的控制器。一旦加载第二个，它就变成空的，没有任何显示。

我建议做的是创建两个不同的控制器。第一个捕获你需要的主题，传递给服务并存储它们，然后在新的控制器中调用它们，它们就会显示出来。两种不同的视图，两种不同的控制器，一种访问信息的服务。

我强烈建议查看 this post 并了解如何在 Angular 中的路由之间传递作用域以及视图如何影响作用域。

Angular ng-bind 不访问作用域变量

Angular ng-bind not accessing scope variables

javascript

scope

angularjs

ng-bind