将文件内 Javascript 与 AngularJS 和 Apache Tiles 一起使用答案

【问题标题】：Use in-file Javascript with AngularJS and Apache Tiles将文件内 Javascript 与 AngularJS 和 Apache Tiles 一起使用
【发布时间】：2015-11-20 18:13:01
【问题描述】：

我一直在学习 AngularJs，目前有一个使用 Apache Tiles 的应用程序。在将 AngularJs 添加到应用程序之前，我在页脚 tile 中有一段工作代码，它计算了当前年份，如下所示：

footer.html

    <script type="text/javascript">
          var year = new Date().getFullYear();
    </script>

    <tr ng-Controller="AppController">
       <td>Created <script>document.write(year)</script>
       </td>
    </tr>

controller.js

    var controllers = {};
    controllers.AppController = ['$scope', function ($scope) {
    $scope.currentYear = new Date().getFullYear();
    }];
    proxy.controller(controllers);

app.js

     var proxy = angular.module('proxy',['ngRoute'])
           .config(function($routeProvider) {
            $routeProvider.when('/index',{
                 templateUrl: 'search.jsp',
                 controller: 'AppController'
            });
     });

页脚现在仅在 index.html 页面上显示“已创建”。有没有一种方法可以让我成功计算出年份？为什么将AngularJs添加到应用程序时，该文件中的JS停止工作？

【问题讨论】：

浏览器控制台有错误吗？
@leo.fcx 不，不适用于此页面。更改视图时出现不同的错误，但这是一个单独的问题。

标签： javascript angularjs tiles apache-tiles

【解决方案1】：

由于您使用的是 AngularJS，您可以这样编写代码：

<script type="text/javascript">
        angular.module('app', []).controller('YearController', ['$scope', function ($scope) {

            $scope.currentYear = new Date().getFullYear();

        }]);
</script>

<table ng-app="app">
    <tr ng-controller="YearController">
        <td>
            Created {{currentYear}}
        </td>
    </tr>
</table>

编辑：如果它在它自己的单独的 HTML 和 JavaScript 文件中，这就是它的样子。

index.html:

<!DOCTYPE html >
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="app">  
    <div ng-include="'footer.html'"></div>
</body>
</html>

页脚.html：

<table>
    <tr ng-controller="YearController">
        <td>
            Created {{currentYear}}
        </td>
    </tr>
</table>

app.js（最好有自己的单独文件）：

var app = angular.module('app', []);
var controllers = {};
controllers.YearController = ['$scope', function ($scope) {

    $scope.currentYear = new Date().getFullYear();

}];
app.controller(controllers);

【讨论】：

我用 AngularJS 测试了你的原始代码，它仍然有效，所以我不完全确定问题可能是什么。
当它是同一个页面时，我也让它工作。我的 footer.html 没有声明“ng-app”，因为瓷砖正在插入它。我在 index.html 中声明了 ng-app。在 footer.html 中使用 angularjs 会有所不同吗？
我编辑了答案以包含更多代码。 ng-app 现在在 index.html 中。您可以在单独的文件中添加单独的 footer.html，然后使用 ng-include 将其放入 index.html。如果这回答了您的问题，请告诉我。
由于某种原因它仍然无法正常工作，但我觉得这应该可以。我去了浏览器调试，它得到了 currentYear 的值。
我编辑了问题以添加我的 app.js 和 controller.js，因为我已经为 Angular 片段添加了这些内容，并更新了 footer.html 以包含您的输入。