Question

此主题与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});
        });
    }
}]);

以下是plunker http://plnkr.co/edit/eHLXMDd7e3vnjsf2BWWf?p=preview

Answer 1

For one, I do not see a "DetailController" defined that you are using to call on click of a contact.

And secondly, you might want to pass $state to your MainCtrl to be able to use $state.go

Updated answer after the above edits ->

In your app's routing, you are defining a $state as 'contact', so you might want to use that for when you are trying to use $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重新路由到您需要的视图/模板。或者另一种解决方案是在rowDblClick上设置观察者，然后重新路由到您的视图/模板。不是完整的解决方案，但至少是某些东西;）

Answer 3

我已经检查了一下你的Plunkr，我做了一些改动只是为了让它工作，你可以看到结果here。

请检查

指定带点的状态时，parent must exists

家长必须存在

如果您只注册一个州，例如contacts.list，您必须在某个时刻定义一个名为contacts的状态，否则将不会注册任何州。状态contacts.list将排队，直到定义了联系人。如果你这样做，你不会看到任何错误，所以要小心你定义父母，以便孩子得到正确的注册。

然后，当您声明一个控制器，例如DetailController时，它必须存在。

我希望这就是你所期待的。

Angular UI Grid在单击行时显示另一个视图

3 个答案: