Как я могу получить доступ к $ scope асинхронным данным из другого метода в том же контроллере - PullRequest
Новая
       39

Как я могу получить доступ к $ scope асинхронным данным из другого метода в том же контроллере

0 голосов
/ 05 июня 2019

Когда моя область действия имеет два свойства, каждое из которых содержит массив, извлеченный асинхронно из базы данных, я не могу элегантно получить доступ к одному из другого.Я уверен, что что-то упустил, потому что мое текущее решение выглядит как хак.

У меня есть страница Angular CRUD, которая содержит таблицу и форму, которая содержит раскрывающийся список выбора.Когда я щелкаю строку в таблице и хочу обновить ее, мне нужно заполнить раскрывающийся список текущим значением.Чтобы получить это право, в настоящее время я объявляю глобальную переменную и назначаю массив, используемый для заполнения раскрывающегося списка, этой переменной после ее извлечения из базы данных. 

var columnHeaderArray;

var app = angular.module('myApp', []);
app.controller('ColumnHeadingController',
    function ($scope, $http) {
        $scope.GetAllData = function () {
            $http({
                method: "get",
                url: "/api/Staat8Maintenance/GetAllColumnHeadings"
            }).then(function (response) {
                $scope.columnheaders = response.data;
                $scope.GetGroupHeaderData();
            },
                function () { alert("Error Occured"); });
        };
        $scope.GetGroupHeaderData = function () {
            $http({
                method: "get",
                url: "/api/Staat8Maintenance/GetGroupHeadingsForCombo"
            }).then(function (response) {
                $scope.groupheaders = response.data;
                columnHeaderArray = response.data;
            },
                function () { alert("Error Occured"); });
        };
        $scope.UpdateColumnHeading = function (cho) {
            document.getElementById("OriginalOrder").innerHTML = cho.ColumnOrder;
            document.getElementById("OriginalColumnHeading").innerHTML = cho.ColumnHeading;
            $scope.ColumnHeading = cho.ColumnHeading;
            $scope.ColumnOrder = cho.ColumnOrder;
            $scope.SelectedOption = columnHeaderArray[columnHeaderArray.findIndex(x => x.GroupingHeaderId == cho.GroupingHeaderId)];
            document.getElementById("btnSave").setAttribute("value", "Update");
            document.getElementById("btnSave").style.backgroundColor = "Yellow";
            document.getElementById("formColumnHeading").style.display = "block";
        };
    }
);


        <div id="SubAccountGrouping" class="tabcontent" 
             ng-controller="ColumnHeadingController"
             ng-init="GetAllData()">
            <h2>Column Headings</h2>
            <h5>This is where the column headings will be maintained.</h5>
            <div id="formColumnHeading" class="form" role="form">
                <div class="container">
                    <div class="row">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-1 edittextwide">Heading:</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control edittextwide"
                                           id="inputColumnHeading"
                                           placeholder="Column Heading"
                                           ng-model="ColumnHeading" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1">Order:</label>
                                <div class="col-sm-6">
                                    <input type="number" class="form-control"
                                           id="inputColumnOrder" 
                                           placeholder="Order"
                                           ng-model="ColumnOrder" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 edittextwide">Group Heading:</label>
                                <div class="col-sm-6">
                                    <select class="form-control edittextwide"
                                            name="groupHeadings"
                                            id="selectGroupHeadings"
                                            ng-model="SelectedOption"
                     ng-options="gh as gh.HeadingName for gh in groupheaders track by gh.GroupingHeaderId">
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div>
                            <input type="button" id="btnSave" class="form-control btn-default"
                                   value="Submit" ng-click="InsertData()" />
                        </div>
                    </div>
                </div>
                <div class="hiddenlabel">
                    <label id="OriginalOrder">0</label>
                    <label id="OriginalColumnHeading">ABC</label>
                </div>
            </div>
            <div class="scrolldiv">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Heading</th>
                            <th>No of Sub-Accounts</th>
                            <th>Column Order</th>
                            <th>Group Heading</th>
                            <th>Parent Group Heading</th>
                            <th>Include in Staat 8</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tr ng-repeat="cho in columnheaders">
                        <td>{{cho.ColumnHeading}}
                        </td>
                        <td>{{cho.NumberOfEntries}}
                        </td>
                        <td>{{cho.ColumnOrder}}
                        </td>
                        <td>{{cho.GroupHeading}}
                        </td>
                        <td>{{cho.ParentGroupHeading}}
                        </td>
                        <td>{{cho.IncludeInStaat8?'Yes':'No'}}
                        </td>
                        <td>
                            <input type="button" class="btn btn-warning" 
                                   value="Update"
                                   ng-click="UpdateColumnHeading(cho)" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>

Когда я пытаюсьчтобы установить $ scope.SelectedOption, используя $ scope.groupheaders напрямую, он взрывается.Я понимаю, что это из-за асинхронной природы, но я подозреваю, что должен быть более элегантный способ достичь этого?

1 Ответ

0 голосов
/ 05 июня 2019 
// include $q to use promises
function ($scope, $http, $q) {
   // create a deferred promise
   var q = q.defer();

   // call the first $http method and store the promise
   var promise1 = $http(config1);

   // call the second $http method and store the promise
   var promise2 = $http(config2);

   // handle when the first promise resolves
   promise1
   .then( (data) => {
       $scope.columnheaders = response.data;
   })
   .catch( (errors) => q.reject(errors));

   // handle when the second promise resolves
   promise2
   .then( (data) => {
       $scope.groupheaders = response.data;
   })
   .catch( (errors) => q.reject(errors));

   // wait for both promises to resolve then do final actions
   $q.all([promise1, promise2])
   .then( () => {
       columnHeaderArray = response.data;
       q.resolve();
   });
   // return the promise for calling methods to wait until this resolves
   return q.promise;
}

Справочник по использованию $ q Справочник по использованию $ http

Вы можете упростить приведенный выше код, чтобы сделать его более сжатым, но я разбил его на некоторые, чтобы было немного легче следовать.

...