AngularJS:ui-router使用新内容重定向成功和刷新范围的视图

Question

我正在从ng-view迁移到ui-view.

在我的控制器中,成功创建/更新/删除后,我想重定向到带有新更新/创建/删除数据的索引视图.

我目前正在使用$state.go.

app.controller('AdminSupplierCreateController', ['$scope', '$state', 'Supplier', 
    function ($scope, $state, Supplier) {
        $scope.h1 = "Register a new Supplier";

        $scope.store = function()
        {
            Supplier.post($scope.supplier)
                .then(
                    function() {
                        console.log("Successfully Created Supplier");
                        $state.go('admin.supplier');
                    },
                    function(response) {
                        console.log("Error with status code: " + response.status);
                    }
                );
        };
}]);

问题是当$状态改变时,范围不会更新.看起来好像原始admin.supplier范围数据没有被刷新.

我试图刷新ui-view与$state.reload()设定的范围之前AdminSupplierIndexController.

app.controller('AdminSupplierIndexController', ['$scope', '$state', 'suppliers', 
    function ($scope, $state, suppliers) {
        $state.reload();
        $scope.suppliers = suppliers;
}]);

这样做会产生get请求api/v1/suppliers,但它实际上并没有显示更新的范围,除非我点击浏览器上的刷新按钮或手动导航到其他状态,然后再次导航回来.

$stateProvider
    ...
    .state('admin.supplier', {
        url : "/supplier",
        templateUrl : 'templates/admin/supplier/index.html',
        controller: "AdminSupplierIndexController",
        resolve: {
            suppliers: ['Supplier', function(Supplier) {
                return Supplier.getList();
            }]
        }
    })
    .state('admin.supplier.create', {
        url : "/create",
        templateUrl : 'templates/admin/supplier/create.html',
        controller: "AdminSupplierCreateController"
    })

解:

app.controller('AdminSupplierCreateController', ['$scope', '$state', 'Supplier', 
    function ($scope, $state, Supplier) {
        $scope.h1 = "Register a new Supplier";

        $scope.store = function() {
            Supplier.post($scope.supplier)
                .then(
                    function() {
                        console.log("Successfully Created Supplier");

                                            // Force Reload on changing state
                                            $state.go('admin.supplier', {}, {reload: true});
                    },
                    function(response) {
                        console.log("Error with status code: ", response.status);
                    }
                );
        };
}]);

Answer 1

发生这种情况是因为您移动到已创建的父状态.您必须向ui-router发出信号,表示您确实要重新加载它.

我想你可能正在寻找的reload选择$state.go().请参阅文档.

此外,一种解决方法可能是将"索引"状态移动到兄弟状态的编辑.admin.supplier.index左右.然后它会在您转换到admin.supplier.edit时被销毁,并在您转换回来时重新创建,并且不需要其他选项.

另外作为旁注,我想这将被认为是好的做法,$state.go而不是$location尽可能使用.