UI-GRID:访问$scope的问题

ui-grid: problems to access $scope

本文关键字:问题 scope 访问 UI-GRID      更新时间:2023-09-26

我的 ui-grid 设置有问题。

有一个带有可扩展行模板的 ui-grid,加载包含另一个 ui 网格的 html 文件。在这个"子网格"中,还有另一个可扩展的行模板,其中包含另一个包含 3 个div 和第三个 ui 网格的 html 文件。

它工作正常,并显示所需的所有数据。在最内部(这是一个词吗?)可扩展行(带有 3 个div 和第三个网格)中,我想使用一些函数来显示和隐藏带有 ng-show 的数据,并使用一些 crud 操作来编辑第三个("子网格")ui-grid 的内容。

由于作用域中的函数不能直接访问,因此我添加了一个 appScopeProvider 并将该函数放在 subGridScope 中。现在可以访问该功能(我用警报检查了它)。

在函数中,我设置了一些布尔变量(例如$scope.showcreate = true),div包含ng-show指令(ng-show="showcreate")来隐藏或显示div的内容。

我在 subGridScope 中调试了该函数,它在 $scope.showxyz 中设置了正确的值,但是当设置为 false 时,div 不会隐藏。

我是否需要重新呈现页面才能"看到"更改?我需要更改 ng-show 指令吗?有没有很好的教程来解释这个问题?我将如何访问"CRUD"操作?即使范围有点"堆叠",grid.appScope.function也能工作吗?

如果您需要更多信息,请询问,我会为您提供所需的所有信息。

这是代码:应用.js:

    var alarmwesen = angular.module('alarmwesen', ['ui.grid', 'ui.grid.expandable']);
alarmwesen.controller('AlarmwesenCtrl', [
    '$scope', '$http', '$log', '$templateCache', 'i18nService', '$interval', 'uiGridConstants', function ($scope, $http, $log, $templateCache, i18NService, $interval, uiGridConstants) {
        $http.get('/api/action1)
                                       .success(function (data) {
                                          $scope.Beauftragter = data;
                                       });
        $scope.gridOptions = {
            enableScrollbars : false,
            expandableRowTemplate: 'expandableRowTemplate.html',
            expandableRowHeight: 1400,
            rowHeight: 36,
            expandableRowScope: { subGridVariable: 'subGridScopeVariable' },
            enableFiltering: true,
            treeRowHeaderAlwaysVisible: false,
            columnDefs: [
            { name: 'Trigraph',field:'ZeigeTrigraphen', width: '10%'  },
            { name: 'Titel', field: 'Titel' },
            ],
            onRegisterApi: function(gridApi) {
                $scope.gridApi = gridApi;
                gridApi.expandable.on.rowExpandedStateChanged($scope, function(row) {
                    if (row.isExpanded) {
                        row.entity.subGridOptions = {
                            appScopeProvider: $scope.subGridScope,
                            enableScrollbars: false,
                            expandableRowTemplate: 'expandableRowTemplate2.html',
                            expandableRowHeight: 700,
                            enableFiltering: false,
                            expandableRowScope: { subGridVariable: 'subsubGridScopeVariable' },
                            columnDefs: [
                                { name: 'LfdAngabe', field:'LfdAngabe', width: '10%' },
                                { name: 'Text', field: 'Text' }],
                            onRegisterApi:function(gridapi) {
                                this.subgridApi = gridapi;
                                gridapi.expandable.on.rowExpandedStateChanged($scope, function(row) {
                                    if (row.isExpanded) {
                                        row.entity.subsubGridOptions = {
                                        appScopeProvider: $scope.subGridScope,
                                            columnDefs: [
                                                { name: 'Durchführungsverantwortliche',width:'25%' }, { name: 'Auftrag' },
                                                { name: 'Aktionen', field: 'EinzelauftragId', width: '10%', cellTemplate: '<a  id="Details" ng-click = "grid.appScope.BearbeiteAuftrag(row.entity.EinzelauftragId)" class="btn btn-success" )"><i class="glyphicon glyphicon-edit"</a><a  id="Details" ng-click = "grid.appScope.LoescheAuftrag(row.entity.AuftragId)" class="btn btn-danger" )"><i class="glyphicon glyphicon-remove"</a>' }
                                            ]
                                        };
                                        $http.get('/api/action2')
                                            .success(function(data) {
                                                row.entity.subsubGridOptions.data = data;
                                            });
                                    }
                                });
                            }
                        };
                        $http.get('/api/action3?trigraph=' + row.entity.ZeigeTrigraphen)
                            .success(function(data) {
                                row.entity.subGridOptions.data = data;
                            });
                }
        });
    }
        };
        $scope.subGridScope = {
            NeuerAuftrag: function () {
              $scope.showcreate = true;
              $scope.showedit = false;
          $scope.showdelete = false;
                alert("Geht doch!");
            }
        };

$http.get('/api/AlarmwesenWebAPI/HoleAlle').then(function (resp) {
    $scope.gridOptions.data = resp.data;
    $log.info(resp);
});

    }]);

网页文件

<button class="btn btn-success" ng-click="grid.appScope.NeuerAuftrag()"><i class="glyphicon glyphicon-plus"></i> &#160 Neuen Auftrag erstellen</button>
        <div class="well" ng-show="showcreate"> 
            <div class="well-header">Einzelauftrag erstellen</div>
            <form role="form" ng-submit="ErstelleEinzelauftrag()" ng-model="Einzelauftrag" name="einzelauftragcreate" id="einzelauftragcreate">
                <fieldset>
                    <input type="text" id="createEinzelauftragsId" class="" ng-model="Einzelauftrag.EinzelauftragsId" />
                    <input type="text" id="createAlarmkalenderId" class="" ng-model="Einzelauftrag.AlarmkalenderId" />
                    <input type="text" id="createAlarmmassnahmeTrigraph" class="" ng-model="Einzelauftrag.AlarmmassnahmeTrigraph" />
                    <input type="text" id="createEinzelmassnahmeLfdAngabe" class="" ng-model="Einzelauftrag.EinzelmassnahmeLfdAngabe" />
                    <div class="form-group">
                        <label for="createBeauftragterId">Durchführungsverantwortlicher:</label>
                        <select name="editBeauftragterId" id="createBeauftragterId"
                                ng-options="Beauftragter.Bezeichnung for Beauftragter in $scope.Beauftragter track by $scope.Beauftragter.BeauftragterId"
                                ng-model="$scope.Beauftragter.BeauftragterId"></select>
                    </div>
                    <div class="form-group">
                        <label for="createAuftragstext">Auftrag:</label>
                        <textarea class="form-control" rows="10" id="createAuftragstext" ng-model="Einzelauftrag.Auftragstext"> </textarea>
                    </div>

                    <button type="submit" class="btn btn-default">Auftrag erstellen</button>
                </fieldset>
            </form>
        </div>
        <div class="well" ng-show="showedit">
            <div class="well-header">Einzelauftrag ändern</div>
            <form role="form" ng-submit="BearbeiteEinzelauftrag()" ng-model="Einzelauftrag" name="einzelauftragedit" id="einzelauftragedit">
                <fieldset>
                    <input type="text" id="editEinzelauftragsId" class="" ng-model="Einzelauftrag.EinzelauftragsId" />
                    <input type="text" id="editAlarmkalenderId" class="" ng-model="Einzelauftrag.AlarmkalenderId" />
                    <input type="text" id="editAlarmmassnahmeTrigraph" class="" ng-model="Einzelauftrag.AlarmmassnahmeTrigraph" />
                    <input type="text" id="editEinzelmassnahmeLfdAngabe" class="" ng-model="Einzelauftrag.EinzelmassnahmeLfdAngabe" />
                    <div class="form-group">
                        <label for="editBeauftragterId">Durchführungsverantwortlicher:</label>
                        <select name="editBeauftragterId" id="editBeauftragterId"
                                ng-options="beauftragter.Bezeichnung for beauftragter in data.Beauftragter track by Beauftragter.BeauftragterId"
                                ng-model="data.beauftragter.BeauftragterId"></select>
                    </div>
                    <div class="form-group">
                        <label for="editAuftragstext">Auftrag:</label>
                        <textarea class="form-control" rows="10" id="editAuftragstext" ng-model="Einzelauftrag.Auftragstext"> </textarea>
                    </div>

                    <button type="submit" class="btn btn-default">Änderung speichern</button>
                </fieldset>
            </form>
        </div>
        <div class="well" ng-show="showdelete">
            <div class="well-header">Einzelauftrag löschen</div>
            <form role="form" ng-submit="LoescheEinzelauftrag()" ng-model="Einzelauftrag" name="einzelauftragdelete" id="einzelauftragdelete">
                <fieldset>
                    <input type="text" id="deleteEinzelauftragsId" class="" ng-model="Einzelauftrag.EinzelauftragsId" />
                    <input type="text" id="deleteAlarmkalenderId" class="" ng-model="Einzelauftrag.AlarmkalenderId" />
                    <input type="text" id="deleteAlarmmassnahmeTrigraph" class="" ng-model="Einzelauftrag.AlarmmassnahmeTrigraph" />
                    <input type="text" id="deleteEinzelmassnahmeLfdAngabe" class="" ng-model="Einzelauftrag.EinzelmassnahmeLfdAngabe" />
                    <div class="form-group">
                        <label for="deleteBeauftragterId">Durchführungsverantwortlicher:</label>
                        <input type="text" class="form-control" id="deleteBeauftragterId" ng-model="Einzelauftrag.BeauftragterId">
                    </div>
                    <div class="form-group">
                        <label for="deleteAuftragstext">Auftrag:</label>
                        <textarea class="form-control" rows="10" id="deleteAuftragstext" ng-model="Einzelauftrag.Auftragstext"> </textarea>
                    </div>

                    <button type="submit" class="btn btn-default">Auftrag löschen</button>
                </fieldset>
            </form>
        </div>
        <div ui-grid="row.entity.subsubGridOptions" style="height: 700px;"></div>

我相信您想在单击第二列上的超链接时从第 3 个网格执行方法"BearbeiteAuftrag"。为此,您可以尝试以下更改。

  1. 在第三个网格定义 (row.entity.subGridOptions=) 上,将行"appScopeProvider: $scope.subGridScope"替换为"appScopeProvider: $scope"。
  2. 在"$scope.gridOptions =...." 之后添加以下函数
$scope.BearbeiteAuftrag = function (einzelauftragId){
alert(einzelauftragId);
//Add code for the logic here with the parameter einzelauftragId
};