javascript - 删除操作后 AngularJS 更新 View

Question

我有一个执行 RESTful 操作的 AngularJS 和 Rails 应用程序:创建、读取、销毁。

我必须在执行“删除”操作后刷新页面，并且正在尝试弄清楚如何异步更新 View 。

“创建”操作使用 .success http 函数更新 View 中的单词；我尝试对 delete 进行类似的处理，但出现错误:Cannot read property 'success' of undefined

应用程序.js

//= require angular-rails-templates
//= require_tree .


angular.module('d-angular', ['ui.router', 'templates'])

// Set routing/configuration
// ------------------------------
.config(['$stateProvider', '$urlRouterProvider',

    // Set state providers
    function($stateProvider, $urlRouterProvider) {$stateProvider

        // Home state
        .state('home', {
          url: '/home',
          templateUrl: 'home.html',
          controller: 'MainCtrl',
          resolve: {
              listPromise: ['lists', function(lists){
                return lists.getAll();
              }]
          }
        })

        $urlRouterProvider.otherwise('home');
    }
])


// lists factory
// Factories are used to organize and share code across the app.
// ------------------------------
.factory('lists', ['$http',

    function($http){
        // create new obect with array of lists
        var o = { lists: [] };

        // get all lists
        o.getAll = function() {
            return $http.get('/lists.json').success(function(data){
                angular.copy(data, o.lists);
            });
        };

        // get specific list
        o.get = function(id) {
          return $http.get('/lists/' + id + '.json').then(function(res){
            return res.data;
          });
        };

        // create list
        o.create = function(post) {
          return $http.post('/lists.json', post).success(function(data){
            o.lists.push(data);
          });
        };

        // delete list
        o.delete = function(id) {
            $http.delete('/lists/' + id + '.json');
        }

        // add word to list
        o.addWord = function(id, word) {
          return $http.post('/lists/' + id + '/words.json', word);
        };

        o.deleteWord = function(id, word) {
            $http.delete('/lists/' + id + '/words/' + word + '.json');
        }

        return o;

    }
])


// Main controller
// ------------------------------
.controller('MainCtrl', ['$scope', '$stateParams', 'lists', '$http',

    // Main scope (used in views)
    function($scope, $stateParams, lists, $http) {

        // array of lists
        $scope.lists = lists.lists;

        $scope.list = lists.lists[$stateParams.id];


        // Add list function
        // Creates a new list
        $scope.addList = function(){
            // prevent empty titles
            if(!$scope.title || $scope.title === '') { 
                return;
            }

            lists.create({
                title: $scope.title,
                date: new Date().toJSON().slice(0,10),
            });

            // reset title
            $scope.title = '';
        };

        $scope.deleteList = function() {
            lists.delete($scope.list.id).then(function(){
                $scope.lists.splice(index, 1)
            }); // UPDATE THE VIEW
        };

        // Add word function
        $scope.addWord = function(){

                // push new word to array
                lists.addWord($scope.list.id, {
                    title: $scope.word,
                    date: new Date().toJSON().slice(0,10),
                })
                .success(function(word) {
                    $scope.list.words.push(word);
                });
            });
        };

        $scope.deleteWord = function(word_id) {
            lists.deleteWord($scope.list.id, word_id);
        };


    }

]);

查看

<div ng-controller="MainCtrl">

  <!-- add a list -->
  <form ng-submit="addList()">
    <input type="text" ng-model="title" placeholder="Enter list"></input>
    <button type="submit">Add</button>
  </form>
  <!-- end add -->

  <!-- list all lists -->
  <select ng-model="list" ng-options="list as list.title for list in lists">
      <option value="">Select List</option>
  </select>
  <!-- end list -->

  <!-- delete list -->
  <form ng-submit="deleteList()">
    <button type="submit">Delete</button>
  </form>
  <!-- end delete -->

  <hr>

  {{list.id}}

  <!-- add word -->
  <form ng-submit="addWord()">
    <input type="text" ng-model="word"></input>
    <button type="submit">Add</button>
  </form>
  <!-- end add -->

  <!-- list all words in list -->
   <div ng-repeat="word in list.words">
      {{word.title}}
      {{word.id}}

      <!-- delete word -->
      <form ng-submit="deleteWord(word.id)">
        <button type="submit">Delete</button>
      </form>
      <!-- end delete -->

  </div>
  <!-- end words -->

Answer 1

是不是因为您没有从 $http.delete() 返回值？将 return 语句添加到您的工厂函数:

    o.deleteWord = function(id, word) {
        return $http.delete('/lists/' + id + '/words/' + word + '.json');
    }

然后在你的 Controller 中，你可以引用.success():

    $scope.deleteWord = function(word_id) {
        lists.deleteWord($scope.list.id, word_id)
             .success(...);
    };