Question

ng-bind没有访问$ scope变量。当视图加载时，数据不会呈现 - 它只是空白，但我可以在＆＃34; showTopic＆＃34;下看到我需要访问的所有数据。控制台中$ 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并了解如何在Angular中的路径之间传递范围以及视图如何影响范围。

Angular ng-bind无法访问范围变量

1 个答案: