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作为网址中显示的参数之一传递

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，其中一个参数位于网址内。

但是当你从你的控制器触发状态时你没有传递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);
}

$ state.go不传递参数

2 个答案: