Angular UI 单击行时网格显示另一个视图

Question

这个话题与很相关。简而言之，有一个 ui 网格 (table)，当您单击（触摸）table 中的行项目时，它会显示另一个视图，但我被卡住了 (ES5)：

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.router']);

app.controller('MainCtrl', ['$scope', 'uiGridConstants', function ($scope, uiGridConstants) {
  $scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false };

  $scope.gridOptions.columnDefs = [
    { field: "contactId", displayName: "CID", width: 60 },
    { field: "name", displayName: "Contact Name" } 
  ];

  $scope.myData = [{contactId: 1, name: "Contact 1"},
                   {contactId: 2, name: "Contact 2"},
                   {contactId: 3, name: "Contact 3"},
                   {contactId: 4, name: "Contact 4"}];

  $scope.gridOptions.data = [];

  $scope.gridOptions.data = $scope.myData;

  $scope.gridOptions.multiSelect = false;
  $scope.gridOptions.modifierKeysToMultiSelect = false;
  $scope.gridOptions.noUnselect = true;

  $scope.gridOptions.onRegisterApi = function (gridApi) {
        //set gridApi on scope
        $scope.gridApi = gridApi;
        gridApi.selection.on.rowSelectionChanged($scope, function (row) {
            $state.go("contact.detail.view", {contactId: row.entity.contactId});
        });
    }
}]);

这里是 plunker http://plnkr.co/edit/eHLXMDd7e3vnjsf2BWWf?p=preview

Answer 1

首先，我没有看到 "DetailController" 定义您用于通过单击联系人进行呼叫。

其次，您可能希望将 $state 传递给您的 MainCtrl 以便能够使用 $state.go

上述编辑后的更新答案 ->

在您应用的路由中，您将 $state 定义为 'contact'，因此您可能希望在尝试使用 $state.go

时使用它

$state.go('contact', {contactId: row.entity.contactId});

Answer 2

将这些行添加到您的控制器：

     function rowTemplate() {
        return '<div ng-dblclick="grid.appScope.rowDoubleClick(row)" >' +
                '  <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }"  ui-grid-cell>'+
                 ' </div> ' +
               '</div>';
    }

    $scope.rowDoubleClick = function (row) {
        alert(console.log(row.entity));            
    };

并放置到您的 gridOptions rowTemplate: rowTemplate(),

然后在 rowDblClick 中重新路由到您需要的 view/template。或者另一种解决方案是在 rowDblClick 上设置观察者，然后重新路由到您的 view/template。不是完整的解决方案，但至少是一些东西 ;)

Answer 3

我已经稍微检查了你的 Plunkr 并且我做了一些更改以使其正常工作，你可以看到结果 here。

请检查

当您用点指定状态时，parent must exists

Parent MUST Exist

If you register only a single state, like contacts.list, you MUST define a state called contacts at some point, or else no states will be registered. The state contacts.list will get queued until contacts is defined. You will not see any errors if you do this, so be careful that you define the parent in order for the child to get properly registered.

那么当你声明一个控制器时，比如DetailController，它必须存在。

希望这就是您所期待的。

Angular UI 单击行时网格显示另一个视图

Angular UI Grid show another view when row is clicked

javascript

row

onclick

angularjs

angular-ui-grid