Question

我有一个使用UI路由器的Angular应用程序和嵌套的ui-view容器。这里，父ui-view的左侧边栏部分，然后右侧内容区域嵌套在父ui-view中：

Screenshot

我正在寻找在父视图和子视图之间共享数据的优雅解决方案。以下是一些注意事项：

我想避免数据在缓存的Angular应用程序中变得陈旧;
$ scope因使用Angular 2.0而转而支持controllerAs。
我希望使用可重复使用的模式来最小化复制/粘贴代码。

以下是我想到的一些解决方案（并指出了缺点），但我对任何人都不满意：

通过controllerAs + $ scope共享数据：

ProductController的：

var product = this;

product.products = products.data;  // array injected via resolve

productEditController：

var productEdit = this;

productEdit.product = product.data;  // object injected via resolve

productEdit.save = function(product) {
    productService.save(product);

    // Update shared data.
    // DOWNSIDE: RELIES ON $scope TO UPDATE PARENT.
    var editedProduct = _.find($scope.product, function(item) {return item._id === product._id});
    $scope.product.products[$scope.product.products.indexof(editedProduct)] = editedProduct;
};

productEdit template：

<form ng-submit="productEdit.save()">...</form>

productService：

productService.save = function(data) {
    return $http.put('http://my.api.com/products/' + data._id, data);
};

通过共享解决方案数据共享数据：

ProductController的：

var product = this;

product.products = products.data;  // array injected via resolve

productEditController：

var productEdit = this;

productEdit.products = products.data;  // array injected via resolve, defined in productController resolve
productEdit.product = product.data;  // object injected via resolve

productEdit.save = function(product) {
    productService.save(product);

    // Update shared data.
    // DOWNSIDE: THIS IS COPY/PASTE AND NOT REUSABLE.
    var editedProduct = _.find(productEdit.products, function(item) {return item._id === product._id});
    productEdit.products[productEdit.products.indexof(editedProduct)] = editedProduct;
};

productEdit template：

<form ng-submit="productEdit.save()">...</form>

productService：

productService.save = function(data) {
    return $http.put('http://my.api.com/products/' + data._id, data);
};

通过服务共享数据：

路线：

controller: productController
resolve: {
    products: function(productsService) {
        return productsService.all();
    }
}

ProductController的：

var product = this;

product.products = products.data;  // array injected via resolve

productEditController：

var productEdit = this;

productEdit.product = product.data;  // object injected via resolve

productEdit.save = function(product) {
    // SERVICE WILL TAKE CARE OF UPDATING SHARED DATA.
    productService.save(product);
};

productEdit template：

<form ng-submit="productEdit.save()">...</form>

productService：

// Shared store/cache of product data, accessible across controllers.
productService.products = null;

productService.all = function() {
    // DOWNSIDE: THIS CAN RESULT IN CONTROLLERS GETTING STALE DATA.
    if (productService.products) {
        return productService.products;
    }

    var promise = $http.get('http://my.api.com/products');

    promise.success(function(data) {
        productService.products = data;
    });

    return promise;
};

productService.find = function(id) {
    var product;

    if (productService.products) {
        // DOWNSIDE: THIS CAN RESULT IN CONTROLLERS GETTING STALE DATA.
        product = productService.products;
    }

    if (!product) {
        product = $http.get('http://my.api.com/products/' + id);
    }

    return product;
};

productService.save = function(data) {
    var promise = $http.put('http://my.api.com/products/' + data._id, data);

    promise.success(function(data) {
        var editedProduct = _.find(productService.products, function(item) {return item._id === data._id});
        productService.products[productService.products.indexof(editedProduct)] = editedProduct;
    });

    return promise;
};

我也考虑使用实时服务，但我现在没有时间全面实施。

这个问题还有另一个优雅的解决方案吗？

如何在Angular应用程序中的控制器之间共享数据？

0 个答案: