ui-grid：访问 $scope 的问题答案

【问题标题】：ui-grid: problems to access $scopeui-grid：访问 $scope 的问题
【发布时间】：2016-06-06 10:33:20
【问题描述】：

我的 ui-grid 设置有问题。

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

它工作正常并显示所需的所有数据。在最内部（是一个词吗？）可扩展行（带有 3 个 div 和第三个网格）中，我想使用一些函数来显示和隐藏数据，使用 ng-show 和一些 crud 操作来编辑第三个的内容("subsubgrid") 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 会起作用吗？

如果您需要更多信息，尽管问，我会为您提供所需的所有信息。

代码如下： app.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);
});



    }]);

html 文件

<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>

【问题讨论】：

标签： javascript html angularjs angular-ui-grid

【解决方案1】：

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

在第三个网格定义 (row.entity.subsubGridOptions=) 中，将“appScopeProvider: $scope.subGridScope”行替换为“appScopeProvider: $scope”
在“$scope.gridOptions =....”之后添加以下函数

$scope.BearbeiteAuftrag = function (einzelauftragId){
alert(einzelauftragId);
//Add code for the logic here with the parameter einzelauftragId
};

【讨论】：