SPA с 2 страницами

169
28 декабря 2018, 03:10

Доброе утро всем экспертам. У меня появилась проблема - на 1 странице не repeat'ятся данные из JSON файла (хотя если задать ил локально в самом контроллере - все работает) И Проблема по важнее - на 2 странице идет загрузка template, но не кнопка не реагирует, я думал проблема в том, что в template я не указал controller но так как он задан функцией не знаю как это сделать.

Ошибок в консоли нету. А на xhr видно, что на загрузке json 304 Not Modified - помогите, я уже не знаю даже где искать проблему, хотя бы с загрузкой данных.

Может это связано как то с live-server и его параметрами, просто прошу, помочь найти проблему!

1-я проблема - модуль:

angular.module('invoicesList', ['ngRoute', 'addInvoices']);

Это template:

<div class="container">
    <div class="heading">
        <h1>Invoices</h1>
    </div>
    <div class="actions">
        <div class="wrapper">
            <h2>Actions</h2>
            <a href="#!/addInvoices"><input type="button" value="Add new"></a>
        </div>
    </div>
    <div class="table-invoices">
        <h2>Invoices</h2>
        <table class="table">
            <thead class="thead-inverse">
                <tr>
                    <th>Create</th>
                    <th>No</th>
                    <th>Supply</th>
                    <th>Comment</th>
                </tr>
            </thead>
            <tbody ng-repeat="invoice in $ctrl.invoices">
                <th>{{invoice.date_created}}</th>
                <td>{{invoice.number}}</td>
                <td>{{invoice.date_supply}}</td>
                <td>{{invoice.comment}}</td>
            </tbody>
        </table>
    </div>
</div>

Это Component :

angular.module('invoicesList').component('invoicesList', {
    templateUrl: 'invoices/invoices.template.html',
    controller: ['$http', function InvoicesListController($http) {
      var self = this;
      $http.get('invoices-list/invoices.json').then(function(response) {
        self.invoices = response.data;
      });
    }]
});

2-я проблема - Модуль :

angular.module('addInvoices', ['ngRoute']);

Component :

angular.module('addInvoices').component('addInvoices', {
    templateUrl: 'add-invoices/add-invoices.template.html',
    controller: ['$routeParams', '$http', '$scope',
      function AddInvoicesController($routeParams, $scope, $http) {
        this.addInvoices = $routeParams.addInvoices;
        $scope.addNewInvoice = function(add) {
          $http({
            method : 'POST',
            url : 'invoices-list/invoices.json'
          }).then(function(response){
                $scope.data = response.data;
                $scope.data.push(add.comment, add.number, add.date_supply);
          }, function(response){
          });
      };
      }
    ]
});

Template :

<div class="container create">
    <div class="heading">
        <h1>Creat invoice</h1>
    </div>
    <div class="wrapper form-container">
        <form>
            <div class="row">
                <div class="col-6">
                    <div class="form-group">
                        <label for="formNumber">Number:</label>
                        <input ng-model="add.number" type="text" class="form-control" id="formNumber" placeholder="Enter number">
                    </div>
                    <div class="form-group">
                        <label for="formSupplyDate">Supplay Date: </label>
                        <input ng-model="add.date_supply" type="text" class="form-control" id="formSupplayDate" placeholder="Select date">
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group">
                        <label for="formDate">Invoice Date: </label>
                        <input type="text" name="Date" id="formDate" class="form-control" placeholder="Select date">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="formComment">Comment: </label>
                <textarea ng-model="add.comment" name="Comment" id="formComment" cols="50" rows="3" placeholder="Write..." class="form-control"></textarea>
            </div>
        </form>
    </div>
    <div class="button-save d-flex justify-content-end">
        <a href="#!/invoices"><button class="btn btn-primary" ng-click="addNewInvoice(add)">Save</button></a>
    </div>
</div>
Answer 1

В данном вопросе ошибка с GET запросом JSON файла заключалась в ошибочном синтаксисе внутри функции success. Требовалось заменить строчку self.invoices = response.data; на self.invoices = response.data.invoices; Мелкая, но грубая ошибка - которая привела к часам поисков.

Запрос POST - это скорее не ошибка, а отсутствие back-end части. Так как мой код не содержит данной части, мой сервер не обрабатывает запрос.

READ ALSO
Обратный отсчет таймера от переменной в миллисекундах JS на лету

Обратный отсчет таймера от переменной в миллисекундах JS на лету

На странице сайта выводится обратный таймер ЧЧ:ММ:ССИз этих данных я отсекаю только СС

130
Помогите с JQuery

Помогите с JQuery

я не могу сделать так, чтобы при нажатии на блок, цвет его краёв менялся на другой цвет, используяanimate(), ничего не выходит! (2 строка с данного...

146
Не могу найти причину - ошибку

Не могу найти причину - ошибку

Данный код должен закрывать меню если целью клика не является блок с менюНо если клик именно по данному блоку то функция останавливается,...

178
jquery замена класса

jquery замена класса

Всем приветЗадача такая - нужно при клике по ссылке сестринскому элементу span присваивать класс badge-danger, в то же время если у сестринских элементов...

188