Question

我正在使用angularJs处理模板系统，我使用外部js文件中的ng-include将模板文件包含到我的视图中。

当我在浏览器中运行index.html时，它会在很长一段时间后崩溃。看起来好像页面一遍又一遍地重新加载，我的CPU监视器就越过了。

地球上的错误是什么？我对angularjs很新，所以如果有人能指出我正确的方向，我会非常感激。

的index.html

＆＃13;

<!DOCTYPE html>
<html lang="en" data-ng-app="angularTemplate" data-ng-controller="templateCtrl">
<head>
	<meta charset="UTF-8">
	<title>{{ pageName + " - " + siteName }}</title>

	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

</head>
<body>
  <header data-ng-include="includeHeader()"></header>
  <script type="text/javascript" src="./assets/js/templateCtrl.js"></script>
</body>
</html>

＆＃13;

JS

＆＃13;

var app = angular.module('angularTemplate', []);
app.controller('templateCtrl', function($scope, $http) {
  
  $scope.includeHeader = function(){
    $http.get("./assets/php/mysql.php?action=getSiteSetup")
    .success(function(response){
      $scope.siteName = response.siteName;
      $scope.siteTagline = response.siteTagline;
    });
    return "./assets/templates/header.html";
  }
  
});

＆＃13;

mysql.php？action = getSiteSetup是一个简单的sql调用，返回

{"siteName":"AngularJS Template","siteTagline":"Just another template...","siteBaseURL":"http:\/\/localhost\/angularjs_template\/"}

Answer 1

由于以下两种实现，存在此问题：

<header data-ng-include="includeHeader()">

和

$scope.includeHeader = function(){
    $http.get("./assets/php/mysql.php?action=getSiteSetup")
    ...
}

您需要了解AngularJS的范围如何用于检测范围的变化。见here

基本上AngularJS将重复运行给定的表达式并将其与之前的值进行比较以确定其值是否已更改，如果已更改，则它将在范围变量更改时执行所需的任何操作。因此，每当AngularJS想要检查事情是否发生变化时，includeHeader()都会重复运行。但是在includeHeader内，它每次都会触发一次网络通话。为了使事物成为一个无限循环，AngularJS决定是否需要检查范围变化的触发器之一是在$http完成时。这是你的无限循环。

简而言之，如果过程密集，请不要使用任何表达式进行范围值检查，反之亦然。 includeHeader不是您应该放置初始化代码的地方。只需在控制器中触发即可。

Answer 2

对于页面之间的路由，您应该使用Angular-Route或ui.router。

此处描述了示例：https://docs.angularjs.org/tutorial/step_07

这使用ng-view指令，允许您根据来自Web应用程序的被调用URL注入内容。这里有ng-view文档：https://docs.angularjs.org/api/ngRoute/directive/ngView

我真的建议你阅读并以这种方式解决它。这样可以完全改造您的工作，但将来可以让您更轻松，更快速地工作。此外，它还可以更容易地进行测试。

另请通过您的header.html代码以改进此答案。

Answer 3

从data-ng-include指令在控制器中绑定的函数内部删除Ajax请求，以使代码如下所示

var app = angular.module('angularTemplate', []);
app.controller('templateCtrl', function($scope, $http) {
      $http.get("./assets/php/mysql.php?action=getSiteSetup")
        .success(function(response){
          $scope.siteName = response.siteName;
          $scope.siteTagline = response.siteTagline;
      });
      $scope.includeHeader = function(){
        return "./assets/templates/header.html";
      }
    });

注意：

您没有必要将ng-include指令绑定到
在未动态加载模板时对范围起作用基于用户交互

浏览器在angularjs $ http.get上崩溃

3 个答案: