ng view не может загрузить javascript и функцию свертывания начальной загрузки с другой страницы - PullRequest
Новая
       27

ng view не может загрузить javascript и функцию свертывания начальной загрузки с другой страницы

0 голосов
/ 31 января 2019

Я пытался использовать ng-route и использовать ng-view, чтобы показать данные формы и данные таблицы, но свертывание данных формы и функция поиска с разбиением на страницы не работают, я должен перезагрузить страницу и функция работает,

после поиска подсказки я попытался поместить jquery перед угловым js-скриптом, а также поместить скрипт на другую страницу, он тоже не работает

index.html 

<html ng-app = "myapp" ng-controller="dataController" >
          <head>
           <script src="js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="css/bootstrap.min.css">
           <link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
           <script src="dist/jquery.min.js"</script>
           <script src="angular/angular.js"></script>
           <script src="angular/route.js"></script>
            <script src="app/app.js"> </script>
            </head>

            <body>

    <ul class="nav navbar-nav">
  <li class="active"><a href="#!/data">Data <span class="sr-only">(current)</span></a></li>

     </ul>
            <div  class="content">
            <ng-view></ng-view>
            </div>
            <script>
          $(function () {
            $('#table1').DataTable()
            $('#table2').DataTable({
              'paging'      : true,
              'lengthChange': false,
              'searching'   : false,
              'ordering'    : true,
              'info'        : true,
              'autoWidth'   : false
              })
              })
             </script>
             </body>
             </html>

view.html 

 <div class="box box-default collapsed-box">
    <div class="box-header with-border">
      <h3 class="box-title">Add Data</h3>
      <div class="box-tools pull-right">
        <button type="button" class="btn btn-success btn-sm" data-widget="collapse"><i class="fa fa-plus"></i></button>
      </div>
    </div>
    <div class="col-md-12">
      <form class="form-horizontal" name="myForm" >
        <div class="box-body">
          <div class="form-group" ng-message="required">
            <label  class="col-sm-2 control-label">Link</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" ng-model="newNames"  placeholder="Device">
            </div>
          </div>
          <div class="form-group">
            <label  class="col-sm-2 control-label">Link</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" ng-model="newLink"  placeholder="Link">
            </div>
          </div>
          <div class="form-group">
            <label  class="col-sm-2 control-label">User</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" ng-model="newUserp" placeholder="User">
            </div>
          </div>
          <div class="form-group">
            <label  class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
              <input type="password" class="form-control" ng-model="newPass"  placeholder="Password">
            </div>
          </div>
        </div>

        <div class="box-footer">
          <button type="button" value="reset" class="btn btn-default" ng-click="reset()">Reset</button>
          <button type="button" value="add" ng-click="addUser()"  class="btn btn-info pull-right">Insert</button>
        </div>
      </form>
    </div>
    </div>

 <!-- view table -->


    <div class="row">
                            <div class="col-xs-12">
                             <div class="box">
                                <div class="box-header">
                                  <h3 class="box-title">Data Table</h3>
                                </div>

                                <div class="box-body">
                                  <table id="table1" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                      <th>Rendering engine</th>
                                      <th>Browser</th>
                                      <th>Platform(s)</th>
                                      <th>Engine version</th>

                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="user in users">
                                      <th>{{user.names}}</th>
                                      <th>{{user.link}}</th>
                                      <th>{{user.userp}}</th>
                                      <th>{{user.pass}}</th>
                                    </tr>
                                    </tfoot>
                                  </table>
                                </div>
                               </div>
                              </div>
                               </div>

app.js 

     var myapp =angular.module('myapp',['ngRoute']);

        myapp.config(['$routeProvider', function($routeProvider) {
            $routeProvider
             .when("/data", {
                 templateUrl : 'view.html'
             })
             .otherwise({
                 template : '<h1>None</h1><p>Empty page</p><a href="#">prova</a>'
             });

         }]) 

    myapp.controller('dataController',function($scope,$http){
    $scope.users;

    $scope.getUser = function() {
          $http({
              method: 'GET',
              url: 'get_data.php'
          }).then(function (response) {
              // success
              $scope.users = response.data;
          }, function (response) {
              // error
              console.log(response.data,response.status);

          });

    };  

  $scope.getUser();

   });
...