15

ここでプランカーを作成しました: http://plnkr.co/edit/zGqouwzxguef13lx48iP?p=preview

日ビューで ui-grid のセルをクリックしても、何も起こりません。私が期待したのは、テスト機能が実行され、「test」というテキストでアラートが表示されることですが、そうではありません。

ここで何が間違っているのですか？

これは、ui-grid 3.0 最新リリースの html セル テンプレートです。

HTML

<div ng-click="test()" ng-switch="row.entity[row.grid.columns.indexOf(col)].isPeriod">

    <div ng-switch-when="true">
        <tabset>
            <tab>
                <tab-heading>
                    <i class="glyphicon glyphicon-book"></i>
                </tab-heading>period id:
                {{ row.entity[row.grid.columns.indexOf(col)].id}}
            </tab>
            <tab select="alertMe()">
                <tab-heading>
                    <i class="glyphicon glyphicon-bell"></i>
                </tab-heading>
                {{row.entity[row.grid.columns.indexOf(col)].content}}
            </tab>

        </tabset>      <!-- PeriodTemplate -->
    </div>
    <div ng-switch-when="false">
       <div>Hello empty template</div>
    </div>      <!-- EmptyPeriodTemplate -->
</div>

コントローラ：

'use strict';
angular.module('projectplanner').controller('DateplannerDayController', function ($scope, $state) {


    var columnHeaderDates = ['col1','col2','col3','col4','col5','col6','col7']
    $scope.columns = createColumnHeaders(columnHeaderDates);

var data = [{isPeriod: true, id: 10, rowNumber: 1},{isPeriod: false, id: 11, rowNumber: 2}]

  $scope.test = function()
  {
    alert('test');
  };

    $scope.gridOptions = {
        rowHeight: 200,
        data: data,
        enableSorting: false,
        enableColumnMenu: false,
        columnDefs: $scope.columns,
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
            $scope.gridApi.core.addRowHeaderColumn(
                { name: 'rowHeaderCol',
                    displayName: '',
                    width: 100,
                    cellTemplate: '<div>row header template</div>'
                });
        }
    };

    function createColumnHeaders(columnHeaders) {
        var columnDefinitions = [];
        for (var i = 0; i < columnHeaders.length; i++) {
            var column = {
                name: columnHeaders[i],
                cellTemplate: 'lessonplanner.day.celltemplate.html',
                field: i + 'x'
            }
            columnDefinitions.push(column);
        }
        return columnDefinitions;
    }
});
4

4 に答える 4

13

このページは私の検索でポップアップし続け、コメントで解決策を見逃すことができました. 要約すると、externalScopes を使用する必要がある可能性があります。セル ヘッダーの Angular ui-grid イベントが起動しないおよびhttp://ui-grid.info/docs/#/tutorial/305_appScopeを参照してください。

于 2015-03-01T14:03:56.030 に答える
2

これは、ui-grid に独自のコントローラーがあり、外部コントローラーについて認識していないためです。

容易にするために、次の手順を実行します。 1. 最初にコントローラーを ui-grid に割り当てます。

var vm = this;
this.$scope.usersGridOptions = {
 appScopeProvider: vm,
 ....
}

これで、コントローラをグリッドに割り当てたら、次のように関数を呼び出すことができます..

"<a type=\"button\"  href=\"\" ng-click=\"function(row.entity)\"> {{ row.entity.text}} </a>"
于 2016-11-17T23:18:10.403 に答える