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

Question

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

在我的 Controller 中，成功创建/更新/删除后，我想使用新近更新/创建/删除的数据重定向到索引 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);
                    }
                );
        };
}]);

问题在于，当更改$ state时，范围不会更新。好像原始的 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()选项。请参阅docs。

同样，一种解决方法可能是将“索引”状态移到编辑的同级状态。 admin.supplier.index左右。然后，当您过渡到admin.supplier.edit时，它将销毁，并在过渡时重新创建，并且不需要其他选项。

另外，我想作为一个注释，我认为在可能的情况下使用$state.go而不是$location将被视为一种好习惯。