Angular JavaScript Update $ переменная области видимости onClick

Question

Я пытаюсь обновить переменную $ scope onClick, которая заполняет таблицу из локального файла JSON. Пока мой код

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
      $scope.update = function () {
                 // Load JSON data to $scope
                $http({
                    method: 'get', 
                    url: '/JSON/Info.json'
                }).then(function (response) {
                    console.log(response, 'res');
                    $scope.friendz = response.data[1];
                },function (error){
                    console.log(error, 'can not get data.');
                });
            }
});

            <div ng-controller="myCtrl" class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <button class="dropdown-item" ng-click="update()">Action</button>
            </div>

     <div ng-controller="myCtrl">
            <table border="1">
                <tr>
                    <th>Name</th>
                    <th>Fax</th>
                    <th>Phone</th>
                    <th>Address</th>
                    <th>Attention</th>
                    <th>Submission</th>
                </tr>
                <tr>
                    <td ng-bind="friendz.Payee.Name"></td>
                    <td ng-bind="friendz.Payee.Fax"></td>
                    <td ng-bind="friendz.Payee.Phone"></td>
                    <td ng-bind="friendz.Payee.Address"></td>
                    <td ng-bind="friendz.Payee.Attention"></td>
                    <td ng-bind="friendz.Payee.SubmissionDate"></td>
                </tr>
            </table>
        </div>

Когда я нажимаю кнопку «Обновить» в раскрывающемся меню, я вижу, что ответ записывается в консоль, но таблица не обновляется onClick. Нужно ли вызывать функцию, чтобы обновить страницу асинхронно, когда я нажимаю кнопку? Когда я использую функцию http get вне моей функции scope.update, она отлично работает при загрузке страницы.

Answer 1

Вы создаете два отдельных экземпляра вашего контроллера, так как у вас есть ng-controller="myCtrl" дважды в шаблоне.

Таким образом, контроллер, обрабатывающий щелчок, - это не тот, который содержит данные, отображаемые в таблице. И их область действия не одинакова: каждый экземпляр контроллера имеет свою собственную область.