AngularJS,将数据传递给statprovider OnEnter函数来填充模态



不知道这是否可能,但我似乎不能让它工作。

<标题> 基本前提

我想有一个用户点击一个编辑按钮在一个表中打开一个模态填充与点击行的内容。

<标题>

我想在不使用URL参数的情况下这样做。填充表的API响应已经提供了填充模态所需的一切,那么为什么在URL中传递一个:ID只是为了再次调用API来获取必要的数据呢?

这是我的表,用户将点击它来启动进程。

<tbody>
  <tr ng-repeat="item in accounts">
    <td><span class="label label-success">Active</span></td>
    <td>{{item.login}}</td>
    <td>{{item.full_name}}</td>
    <td>{{item.member_since}}</td>
    <td>Daily</td>
    <td><a ng-click="showLinks(item)" class="btn btn-warning">LINKS</a></td>
    <td><a ng-click="editAccount(item)" class="btn btn-primary">EDIT</a></td>
    <td><a ng-click="deleteAccount(item)" class="btn btn-danger">DELETE</a></td>
  </tr>
</tbody>

在我的控制器中,我有以下内容:

$scope.editAccount = function (item) {
  console.log("Editing Account"); 
  console.log(item); 
  $state.go('edit', item);
}

控制台正确地打印出对象。现在一切顺利。我想把这个选中的项目传递给statprovider,这样它就可以在onEnter函数中填充模态。

注意,我已经注释掉了"return {login: 'TEST'}"。如果我保留这个,模态填充正确。

$stateProvider.state('edit', {
    url: '/edit',
    onEnter: function($stateParams, $state, $modal) {
        console.log("Enter Edit");
        $modal.open({
            templateUrl: "views/account_edit.htm",
            //params: ['login'],
            resolve: {
                item: function() {
                    console.log("Resolving Edit");
                    console.log($stateParams);
                    console.log($state.params);
                    console.log(this);
                    //return {login:"TEST"};
                }
            },
            controller: ['$scope', 'item', function($scope, item) {
                console.log("Controlling Edit");
                $scope.item = item;
                    
                $scope.cancel = function() {
                    $scope.$close(true);
                };
                $scope.ok = function() {
                    $scope.$close(true);
                    };
                }]
            }).result.then(function(result) {
                if (result) {
                    console.log("Acting on RESULT");
                    return $state.go("home");
                }
            });
        }
    });

我似乎无法工作的是如何访问在$阶段传递的ITEM。从$stateProvider中获取。有人有什么想法吗?下面的文档表明,我应该能够看到$stateParams中的数据,但它不在那里

go(to, params, options)

params(可选)- {object=} -将被发送到状态的参数映射,将填充$stateParams。任何未指定的参数将从当前定义的参数继承。例如,这允许转到共享父状态中指定的参数的兄弟状态。参数继承只在共同的祖先状态之间工作,也就是说,转换到兄弟节点将获得所有父节点的参数,转换到子节点将获得所有当前参数,等等。

<标题> * *更新

我找到的唯一方法是做以下更新。

   $scope.editAccount = function (item) {
        console.log("Editing Account"); 
        console.log(item);
        $state.params.item = item;
        //$state.go('edit', item);
        $state.go('edit');
    };

    resolve: {
        item: function() {
            return $state.params.item;
        }
    },

要向一个状态传递参数,你需要在该状态的url选项中定义这些参数。如果不需要,可以在params选项中定义参数:

$stateProvider.state('edit', {
    url: '/edit',
    params: {
        login: null,
        full_name: null,
        member_since: null
    },
    onEnter: function($stateParams, $state, $modal) {
        // ...
    }
});

最新更新