Используйте внутрифайловый Javascript с плитками AngularJS и Apache.

Я изучаю AngularJs, и в настоящее время у меня есть приложение, использующее плитки Apache. Перед добавлением AngularJs в приложение у меня был рабочий фрагмент кода внутри плитки нижнего колонтитула, который вычислял текущий год, который выглядит следующим образом:

нижний колонтитул.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. Есть ли способ с угловым, чтобы я мог успешно вычислить год? Почему JS в этом файле перестает работать, когда в приложение добавляется AngularJs?


javascript angularjs tiles apache-tiles
person Lexi    schedule 20.11.2015    source источник
comment
Есть ли ошибки в консоли браузера?   -  person leo.fcx    schedule 20.11.2015
comment
@leo.fcx нет, не для этой страницы. У меня другая ошибка, когда я меняю представления, но это отдельная проблема.   -  person Lexi    schedule 20.11.2015

Ответы (1)


arrow_upward
2
arrow_downward

Поскольку вы используете 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.

индекс.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);
person Ravvy    schedule 20.11.2015
comment
Я проверил ваш исходный код с помощью AngularJS, и он все еще работает, поэтому я не совсем уверен, в чем может быть проблема. - person Ravvy; 20.11.2015
comment
Я также заставил его работать, когда это была та же страница. Мой footer.html не объявляет «ng-app», потому что плитка вставляет его. У меня есть ng-app, объявленный в моем index.html. Будет ли это иметь значение при использовании angularjs в footer.html? - person Lexi; 20.11.2015
comment
Я отредактировал свой ответ, чтобы включить больше кода. ng-app теперь внутри index.html. Можно добавить отдельный footer.html в отдельный файл и закинуть его в index.html с помощью ng-include. Дайте мне знать, если это ответит на ваш вопрос. - person Ravvy; 20.11.2015
comment
По какой-то причине это все еще не работает, но я чувствую, что это должно работать. Я перешел к отладке браузера, и он получает значение для текущего года. - person Lexi; 20.11.2015
comment
Я отредактировал вопрос, добавив свои app.js и controller.js, поскольку они у меня уже были для угловых частей, и обновил footer.html, чтобы включить ваш ввод. - person Lexi; 20.11.2015
comment
Вы пытаетесь сделать по-старому или по-новому Angular? Если вы пробуете новый способ Angular, footer.html необходимо обновить с помощью Created {{currentYear}}. - person Ravvy; 20.11.2015
comment
Я думаю, что угловой способ может быть лучше, но на самом деле любой подход, который работает, был бы хорош. Я обновил его в своем проекте и забыл изменить здесь, в вопросе, но это все еще не сработало. - person Lexi; 23.11.2015
comment
В общем, у меня был глупый момент, и я сделал копию файла на случай, если что-то пойдет не так. Я редактировал файл копии, а не файл, на который ссылались в плитках. Спасибо вам за помощь. - person Lexi; 23.11.2015