AngularJS - Использование функции Javascript в ng-view - PullRequest
Новая
       20

AngularJS - Использование функции Javascript в ng-view

0 голосов
/ 04 ноября 2019

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

loading.html 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      /* Add animation to "page content" */
      .animate-bottom {
      position: relative;
      -webkit-animation-name: animatebottom;
      -webkit-animation-duration: 1s;
      animation-name: animatebottom;
      animation-duration: 1s
      }
      @-webkit-keyframes animatebottom {
      from { bottom:-100px; opacity:0 } 
      to { bottom:0px; opacity:1 }
      }
      @keyframes animatebottom { 
      from{ bottom:-100px; opacity:0 } 
      to{ bottom:0; opacity:1 }
      }
      #myDiv {
      display: none;
      text-align: center;
      }
    </style>
  </head>
  <body onload="myFunction()" style="margin:0;">
    <center>
      <div id="loading">
        <div></div>
        <div></div>
        <a>Yükleniyor</a>
      </div>
    </center>
    <div style="display:none;" id="myDiv" class="animate-bottom">
      <h2>welcome</h2>
      <p>loaded content</p>
    </div>
<script>
var myVar;

function myFunction() {
  myVar = setTimeout(showPage, 2000);
}

function showPage() {
  document.getElementById("loading").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
}

});
</script>
  </body>
</html>

home.html 

<div class="body" ng-app="v3App" ng-controller="v3Ctrl">
  <ng-view></ng-view>
</div>

app.js 

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

appv3.config(function ($routeProvider) {

  $routeProvider.when('/', {
      templateUrl: 'loading.html'
    })
    .when('/home', {
      templateUrl: 'loading.html'
    })
    .when('/forum', {
      templateUrl: 'forum/index'
    })
    .otherwise({
      redirectTo: '/404'
    })

});

1 Ответ

0 голосов
/ 04 ноября 2019

Чтобы использовать JavaScript в элементе <ng-view>, создайте функцию контроллера: 

  $routeProvider.when('/', {
      templateUrl: 'loading.html',
      controller: function() {
          //code here
      })
  })

Когда маршрутизатор загружает представление, он вызывает функцию контроллера.

Другойместо для запуска JavaScript находится в функции разрешения: 

  $routeProvider.when('/', {
      templateUrl: 'loading.html',
      resolve: {
          loading: function() {
              //code here
              if (ok) return "OK";
              //ELSE abort
              throw "loading aborted";
          }
      }
  })

Перед загрузкой представления маршрутизатор вызывает функции разрешения.

Для получения дополнительной информации см.

...