AngularJS - 在 ng-view 中使用 Javascript 函数答案

【问题标题】：AngularJS - Using Javascript function in ng-viewAngularJS - 在 ng-view 中使用 Javascript 函数
【发布时间】：2020-02-29 22:41:44
【问题描述】：

我正在尝试在页面加载之前显示加载动画，但我无法在 ng-view 中运行 javascript 函数，我正在寻找解决方案我想你会支持我的问题我正在等待你支持
_____________________________________________________________________

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'
    })

});

【问题讨论】：

标签： javascript html angularjs ngroute

【解决方案1】：

要在 <ng-view> 元素中使用 JavaScript，请创建一个控制器函数：

  $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";
          }
      }
  })

在加载视图之前，路由器会调用解析函数。

有关详细信息，请参阅

AngularJS ngRoute $routeProvider Provider API Reference - .when Method

【讨论】：

没有效果，你能帮我多一点吗？