javascript - 将 question_id 添加到用户模式 Angular 中的书签列表

Question

架构:

var UserSchema = new Schema({
    ques_bookmarks: [{ type: String }],
})

Controller :

.controller('questionsController', function(questionsFactory, $routeParams, $scope) {
  var that = this;
  questionid = $routeParams.id;
  stats = false;

  var getallQuestions = function() {
    questionsFactory.getQuestions(function(data) {
      that.questions = data;
      console.log(data)
    })
  }
  getallQuestions();
  this.getthatQuestion = function() {
    questionsFactory.getthatQuestion(questionid, function(data) {
      questionsFactory.checkBookmark(questionid, function(response) {

        if (response == "bookmarked") {
          data.stats = true;
        } else {
          data.stats = false;
        }
      })
      that.question = data;
    })
  }
  this.addbookmark = function(qId) {
    questionid = qId;

    questionsFactory.addBookmark(qId, function(response) {
      that.getthatQuestion();
    })
  }
  this.removebookmark = function(qId) {
    questionid = qId;

    questionsFactory.removeBookmark(qId, function(response) {
      that.getthatQuestion();
    })
  }

  this.checkbookmark = function(question) {
    questionsFactory.checkBookmark(question._id, function(response) {
      if (response == "bookmarked") {
        question.stats = true;
      } else {
        question.stats = false;
      }
    })
  }
});

工厂:

.factory('questionsFactory', function($http, AuthToken, $route) {
  var factory = {};
  var token = AuthToken.getToken();
  var userid = AuthToken.getid();

  factory.getQuestions = function(callback) {
    $http({
      url: 'api/all_questions',
      method: 'GET',
      headers: {
        'x-access-token': token
      }
    }).then(function(response) {
      callback(response.data)
    })
  }

  factory.getthatQuestion = function(info, callback) {
    $http({
      url: 'api/one_question',
      method: 'GET',
      headers: {
        'x-access-token': token
      },
      params: {
        question_id: info
      }
    }).then(function(response) {
      console.log('[FACTORY] one question data:', response.data);
      callback(response.data)
    })
  }

  factory.addBookmark = function(info, callback) {
    $http({
      url: 'api/add_bookmark_ques',
      method: 'POST',
      headers: {
        'x-access-token': token
      },
      params: {
        'user_id': userid
      },
      data: {
        'ques_id': info
      }
    }).success(function(data) {
      console.log('add bookmark: ' + data);
      callback()
    })
  }

  factory.checkBookmark = function(info, callback) {
    $http({
      url: 'api/check_bookmark_ques',
      method: 'POST',
      headers: {
        'x-access-token': token
      },
      params: {
        'user_id': userid
      },
      data: {
        'ques_id': info
      }
    }).success(function(data) {
      console.log('check bookmark: ' + data);
      callback(data)
    })
  }

  factory.removeBookmark = function(info, callback) {
    $http({
      url: 'api/remove_bookmark_ques',
      method: 'POST',
      headers: {
        'x-access-token': token
      },
      params: {
        'user_id': userid
      },
      data: {
        'ques_id': info
      }
    }).success(function(data) {
      console.log('remove bookmark: ' + data);
      callback()
    })
  }
  return factory
})

HTML:

<div ng-controller="questionsController as questCtrl">
    <div ng-repeat="question in questCtrl.questions>
        <div ng-init="questCtrl.checkbookmark(question)">
            <div ng-if="question.stats" ng-click="questCtrl.removebookmark(question._id)" class="glyphicon glyphicon-heart"></div>
            <div ng-if="!question.stats" ng-click="questCtrl.addbookmark(question._id)" class="glyphicon glyphicon-heart-empty"></div> 
        </div>
    </div>
</div>

当我单击字形图标将其添加/删除到书签列表时，数据库成功更新但图标没有改变。它只会在页面刷新时发生变化。

如何解决？

Answer 1

当您更改数据库中的书签时，您实际上并没有更改客户端的值，只是在服务器端。下面的代码对此没有任何作用:

   this.addbookmark = function(qId){
    questionid = qId;

    questionsFactory.addBookmark(qId, function(response){
        that.getthatQuestion();
    })
}
this.removebookmark = function(qId){
    questionid = qId;

    questionsFactory.removeBookmark(qId, function(response){
        that.getthatQuestion();
    })
}

这里的方法实际上返回另一个未绑定(bind)到 View 的 javascript 对象实例(命名数据覆盖绑定(bind)的那个。问题)，因此更改它不会影响您的 View :

  // the problem is that
    this.getthatQuestion = function(){
        // when you call two asynchronus functions
        questionsFactory.getthatQuestion(questionid, function(data){
            //first one returns result and you gave value already to the angular
            questionsFactory.checkBookmark(questionid, function(response){
            // second one return later and you havent told angular about this response
            if(response == "bookmarked"){
                data.stats = true;  
            }
            else{
                data.stats = false;  
            }
             // with the each function below we find view-bound object and change its property so angular will know about this change.
             angular.forEach(that.questions,function(e){
                if(e._id == questionid)
                    e.stats = data.stats; 
             });
        })
        })
    }

Ps:我认为您需要尝试更好的命名约定/大小写，因为我可以在第 4 次阅读时理解您的代码的作用，而且您误解了工厂的作用和服务的作用。