$state.go不传递参数

Question

这是我的HTML的一部分：

<td>
   <button class="btn btn-primary" ui-sref="edit({id: v.customerId})" ui-sref-opts="{reload: true}">Edit</button>
   <button class="btn btn-primary" ng-click="removeRow(v.firstName);">Delete</button>
</td>

正如您所看到的，我将customerId作为和id作为url中显示的参数之一进行传递

app.js：

var app = angular.module('webtrekkApp', ['ngSanitize', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('edit', {
            name: 'edit',
            url: '/users/:id/edit',
            templateUrl: './views/customer-details.html',
            controller: 'ctrl',
            params: {
                obj: null
            }
        });
});

ctrl.js：

//If 'initData' isn't set, then set it up by default
    if(!localStorage.getItem('initData')) {
        $window.localStorage.setItem('initData', JSON.stringify($scope.initData));
    }
    $scope.retrievedData = JSON.parse($window.localStorage.getItem('initData'));
    for (var i = 0; i < $scope.retrievedData.length; i++) {
        $scope.retrievedData[i].birthdayDate = new Date().getFullYear() - new Date($scope.retrievedData[i].birthdayDate).getFullYear();
    }
    $scope.sortedType = 'firstName';
    $scope.sortedReverse = false;
    //Remove Rows and Update localStorage Key Values
    $scope.removeRow = function(name) {
        var index = $scope.retrievedData.findIndex(function(obj) {return obj.firstName === name});
        $scope.retrievedData.splice(index, 1);
        window.localStorage.setItem('initData', JSON.stringify($scope.retrievedData));
    };
    $state.go('edit', {obj: $scope.retrievedData});

因此我创建了一个表，当用户单击“编辑”时，我需要将THAT object传递给ui.router，这样我就可以在customer-details.html中显示它。我该怎么做呢？我在这里做错了什么。我已经阅读了所有关于ui.router的文档，但不知道应该在初始控制器中还是在其他控制器中定义$state.go。我也关注了这个问题，但不能让它工作：How to pass custom data in $state.go() in angular-ui-router?

Answer 1

在编辑状态下，您有两个参数id和obj，其中一个在url中。

但是，当您从控制器触发状态时，您没有传递id参数，也没有定义默认值

$state.go('edit', {obj: $scope.retrievedData}); 

尝试将其添加到您的params对象中

params: {
   obj: null,
   id: null
}

编辑：

要回答您的进一步问题：

<button class="btn btn-primary" ng-click="handleItem(v);">Go to Edit state</button>

$scope.handleItem = function(item){
 //here extract your item specific data from $scope.retrievedData then change the state
 var itemData = getItemData(item, $scope.retrieveData);
 $state.go('edit', {obj: itemData});
}

Answer 2

您好，您没有使用控制器，如果您想将参数传递给$state.go()，您应该让控制器在特定状态下获取该值。

app.js

var app = angular.module('webtrekkApp', ['ngSanitize', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('edit', {
            name: 'edit',
            url: '/users/:id/edit',
            templateUrl: './views/customer-details.html',
            controller: 'myController',
            params: {
                obj: null
            }
        });
});

在控制器中

function myController($state) {
   conrole.log($state.params.obj);
}