通过路由提供者解析将对象从路由传递到控制器

Question

我正在尝试将 $routeProvider 的 resolve 方法中的变量传递给将用于此路由的控制器。 但发生的情况是对象正在被解析，但控制器不会等到对象的解析。 这是我正在使用的代码中的一个 sn-p：

app.config(["$locationProvider", "$routeProvider", "$httpProvider", function ($locationProvider, $routeProvider, $httpProvider) {
        $locationProvider.hashPrefix('');
  .when("/EditProduct/:id",
            {
                templateUrl: "App/Products/editProductView.html",
                controller: "EditProductCtrl as vm",
                resolve: {

                    product: function (productsResource, $route, $routeParams) {
                        console.log($route.current.params.id);
                        return productsResource.getProductById().get({ id: $route.current.params.id }, function (data) {
                            console.log("inside the resolved function");
                            console.log(data.Name);
                            return data;
                        })
                    }
                }
            })
            .otherwise({ redirectTo: "/" });

因此会显示带有 app.js 语句名称的日志消息。 而控制器注入了所谓的解析产品，如下所示：

(function () {
    "use strict";
    angular.module("ProductManagementTool").controller("EditProductCtrl", ["product","productsResource", "currentUser", EditUserCtrl]);

    function EditProductCtrl(product, productsResource, currentUser) {
        var editCtrlViewModel = this;
        console.log("the full name is " + product.Name);
            editCtrlViewModel.product = product;
            editCtrlViewModel.title = "Edit: " + product.Name;


    }
}());

而控制器中的日志消息显示为未定义。

我正在使用 Angular js 1.6.1。

Answer 1

控制器不会等待，因为已解决的元素是 $resource 返回的 Promise（我假设您使用 $resource）。你应该做这样的事情：

var editCtrlViewModel = this;
product.$promise.then(function (element) {
    editCtrlViewModel.product = element;
    editCtrlViewModel.title = "Edit: " + element.Name;
})