单击行时，Angular UI Grid 显示另一个视图答案

【问题标题】：Angular UI Grid show another view when row is clicked单击行时，Angular UI Grid 显示另一个视图
【发布时间】：2015-08-09 16:00:05
【问题描述】：

这个话题与this one非常相关。简而言之，有一个 ui 网格（表格），当您单击（触摸）表格中的行项目时，它会显示另一个视图，但我被卡住了（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});
        });
    }
}]);

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

【问题讨论】：

标签： javascript angularjs onclick row angular-ui-grid

【解决方案1】：

首先，我没有看到定义的“DetailController”用于单击联系人进行呼叫。

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

上述修改后的更新答案 ->

在您的应用程序的路由中，您将 $state 定义为“联系人”，因此您可能希望在尝试使用 $state.go 时使用它

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

【讨论】：

Tnx，我纠正了这些错误forked plunker，但点击仍然不起作用
我已经更新了新的建议。检查是否有效。
我只尝试了'联系'状态，仍然不起作用。

【解决方案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 中重新路由到您需要的视图/模板。或者另一种解决方案可能是在rowDblClick 上有一个观察者，然后重新路由到您的视图/模板。不是完整的解决方案，但至少是一些东西;)

【讨论】：

【解决方案3】：

我已经检查了您的 Plunkr 并进行了一些更改以使其正常工作，您可以看到结果here。

请检查

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

父级必须存在

如果您只注册一个状态，例如contacts.list，您必须在某个时候定义一个名为contacts 的状态，否则不会注册任何状态。在定义联系人之前，状态 contacts.list 将排队。如果这样做，您将不会看到任何错误，因此请小心定义父级，以便子级正确注册。

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

我希望这是你所期望的。

【讨论】：