Angularjs 存储 $scope 变量答案

【问题标题】：Angularjs storing $scope variableAngularjs 存储 $scope 变量
【发布时间】：2015-05-11 23:53:12
【问题描述】：

我正在使用 Yeoman Angular-fullstack 构建一个 Web 应用程序。我对如何更新我的 $scope 变量感到困惑，以便在进行更改后，结果会自动显示在 html 页面上而无需刷新。

HTML

<h1 class="page-header">Drugs:</h1>
<div class="row">
    <div class="col-sm-4 col-sm-offset-4">
        <div ng-repeat="current in alldrugs">
                <p>
                <a href="/edit={{current._id}}"> <button class="btn btn-default" type="button">{{current.name}}</button></a>
                <a ng-click="delete(current)"><button class="btn btn-default" type="button">delete</button></a>
              </p>   
        </div>
    </div>
  </div>

Controller.js

'use strict';

angular.module('firstApp')
  .controller('MainCtrl', function ($scope, $http) {
    $scope.alldrugs = [];

    $http.get('/api/drugs').success(function(alldrugs) {
      $scope.alldrugs = alldrugs;
    });

    $scope.delete = function(thing) {
      $http.delete('/api/drugs/' + thing._id);
      $http.get('/api/drugs').success(function(alldrugs) {
        $scope.alldrugs = alldrugs;
      });
    };
  });

当调用 $scope.delete 时，该项目被删除，但是在我刷新页面之前页面不会反映更改。我认为这与 http 回调函数的范围有关。任何帮助将不胜感激，谢谢。

【问题讨论】：

您可以使用splice，但您的后端应该会更新列表。不确定后端是否有错误。尝试链接您的 delete 和 get
至少将 $http.get('/api/drugs') 放在删除回调中，以防万一。
代码几乎直接来自the github project，所以我很确定它与前端有关。不幸的是，链接删除和获取并没有帮助。奇怪的是它正在成功删除 - 该项目会立即在数据库中更新，我可以在控制台中打印更改。虽然没有反映在 html 中

标签： angularjs node.js angularjs-directive angularjs-scope mean-stack

【解决方案1】：

问题在于 $http.delete 和 $http.get 都是异步调用的。

调用 $http.get 时，$http.delete 还没有完成。您必须确保在删除之后调用 get。

这段代码可以工作，虽然它不是一个优雅的解决方案：

$scope.delete = function(thing) {
  $http.delete('/api/drugs/' + thing._id).success(function(){
        //The get will be called AFTER the delete
        $http.get('/api/drugs').success(function(alldrugs) {
           $scope.alldrugs = alldrugs;
        });
  });
};

【讨论】：

这段代码运行正常。你认为像这样嵌套这个函数会影响性能吗？删除没有我希望的那么快，但也许这就是使用 ng-repeat 的本质。非常感谢！
好吧，从 UI 来看，你不能做得更好，但是对服务器进行两次查询太糟糕了，如果删除会返回你 alldrugs，性能会更好，所以你不需要再次查询。
@TroyGriffiths：嵌套函数的问题不是性能，而是代码的可读性（它被称为“回调地狱”，想象一下你有 5,6 个函数嵌套）。你可以谷歌“angular js promise chaining”来了解更多关于如何解决它。

【解决方案2】：

你可以只用一个请求来解决它：

 $scope.delete = function(thing) {
  $http.delete('/api/drugs/' + thing._id).success(function(){
      $scope.alldrugs = $scope.alldrugs.filter(function(t) {
          return t._id !== thing._id; // Remove the drug which was deleted 
      });
  })
  .error(function() {
       // Drug couldnt be deleted, notify the user?
  });
};

【讨论】：