Question

我无法在$ routeProvider中解析以自动更新视图。

我试图将Adam Freeman的Pro Angular书中的一个例子（第22章）从Deployd转换为Express-Mongo。可能的提示是自动刷新使用本地版本的Deployd。当我切换到本地Express和Mongo后端（在将id更改为_id之后）时，自动视图更新不再有效。

使用Express-Mongo时，我必须手动执行$ route.reload（）函数以显示数据库中的更新更改。我是棱角分明的新人，所以任何提示都值得赞赏。

这个沉重的删除工作：

$scope.deleteProduct = function (product) {
    product.$delete();
    $route.reload();
    $location.path("/list");
}

以下版本不起作用。我的（可能是错误的）印象是$ routeProvider中的'resolve'属性在返回数据时更新视图。使用下面的代码，我得到一个类型错误：未定义不是函数

 $scope.deleteProduct = function (product) {
        product.$delete().then(function () {
            $scope.data.products.splice($scope.data.products.indexOf(product), 1);
});
        $location.path("/list");
}

控制台日志错误

TypeError: undefined is not a function
    at http://localhost:8080/bower_components/angular-resource/angular-resource.js:530:25
    at Array.forEach (native)
    at forEach (http://localhost:8080/bower_components/angular/angular.js:302:11)
    at angular.module.factory.Resource.(anonymous function).$http.then.value.$resolved (http://localhost:8080/bower_components/angular-resource/angular-resource.js:529:17)
    at deferred.promise.then.wrappedCallback (http://localhost:8080/bower_components/angular/angular.js:10905:81)
    at deferred.promise.then.wrappedCallback (http://localhost:8080/bower_components/angular/angular.js:10905:81)
    at http://localhost:8080/bower_components/angular/angular.js:10991:26
    at Scope.$get.Scope.$eval (http://localhost:8080/bower_components/angular/angular.js:11906:28)
    at Scope.$get.Scope.$digest (http://localhost:8080/bower_components/angular/angular.js:11734:31)
    at Scope.ng.config.$provide.decorator.$delegate.__proto__.$digest (<anonymous>:844:31) angular.js:9383

以下是模块的代码

 angular.module("exampleApp", ["ngResource", "ngRoute"])
        .constant("baseUrl", "http://localhost:8080/api/products/")          
        .factory("productsResource", function ($resource, baseUrl) {
        return $resource(baseUrl + ":id", { id: "@_id" },
          {
              create: { method: "POST" , isArray: true },
              save: { method: "PUT", isArray: true },
              delete: {method: "DELETE", isArray: true},
              update: {method: "PUT", isArray: true},
              query: {method: "GET", isArray: true}
          })
})

        .config(function ($routeProvider, $locationProvider) {

                $locationProvider.html5Mode(true);
                ...
                $routeProvider.otherwise({
                templateUrl: "/views/tableView.html",
                controller: "tableCtrl",
                resolve: {
                    data: function (productsResource) {
                        return productsResource.query();
                    }
                }
            });
        })

.controller("defaultCtrl", function ($scope, $location, productsResource, $route) {
        $scope.data = {};
        $scope.deleteProduct = function (product) {
                  product.$delete().then(function(products) {
                      //Success
                      console.log("Success");  //Don't Get Here
                      $scope.data.products.splice($scope.data.products.indexOf(product), 1);

                  }, function(errResponse) {
                      //Failure (Code Produces a Type Error: Undefined is not a function)
                      console.log("Error: " +  errResponse); 
                  });

                  $location.path("/list");
              }
})

绑定到$ routeProvider.otherwise

的表视图控制器

.controller("tableCtrl", function ($scope, $location, $route, data) {
    $scope.data.products = data;
    $scope.refreshProducts = function () {
        $route.reload();
} })

Answer 1

我认为你应该在删除完成时重定向：

$scope.deleteProduct = function (product) {
    product.$delete().then(function () {
        $scope.data.products.splice($scope.data.products.indexOf(product), 1);
        $location.path("/list");
    });
}

Answer 2

你错过了}和文字一致：

delete: {method: "DELETE", isArray: true

AngularJS - $ routeProvider并解析不自动更新视图

2 个答案: