JavaScript не работает для элементов, маршрутизируемых с помощью ng-include

Question

JavaScript не работает для элементов, маршрутизируемых с помощью ng-include

0

В приведенном ниже #test кнопка #test работает, но #calendarButton этого не делает. Должна быть какая-то причина, по которой мой header.html не может получить доступ к моему Javascript.

index.php

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Lifting Analytics </title>

    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-ui-router.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
  </head>
  <body>

    <div class"container" ng-app="app">
        <header ng-include="'templates/header.html'"></header> 
        <div ui-view></div>
    </div>

    <button id="test">test</button> // This button works

  </body>
</html>

header.html (эта кнопка не работает)

...
<button id="calendarButton" class="btn btn-default">Calendar</button> 
...

script.js

$(document).ready(function() {
  $('#test').click(function(){
    console.log("in");
    alert("in");
  });
  $('#calendarButton').click(function(){
    console.log("in");
    alert("in");
  });
});

app.js (не уверен, что это необходимо)

Также, как я могу ссылаться на этот файл? маршрутизатор? Извините, мой первый день с угловатым.

angular
.module('app', [
    'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'templates/home.html'
        })
        .state('record', {
            url: '/record',
            templateUrl: 'templates/record.html'
        })
        .state('calendar', {
            url: '/calendar',
            templateUrl: 'templates/calendar.html',
            controller: function($scope){
                $scope.array = ["item 1", "item 2", "item 3"]
            }
        })
        .state('graph', {
            url: '/graph',
            templateUrl: 'templates/graph.html'
        })
}])

Nate May 30 окт. 2015, в 03:07

Источник

0

document.ready бесполезен в angular, используйте обработчики угловых событий
charlietfl 30 окт. 2015, в 02:35

Теги:

javascript

jquery

html

angularjs

angular-ui-router

1 ответ

Ещё вопросы

document.ready бесполезен в angular, используйте обработчики угловых событий

Tim Mac · Answer 1 · 2015-10-30T01-50-00.000Z

Если вы выполняете маршрутизацию с использованием ng-include или ng-route, элементы в этих маршрутах не отображаются до тех пор, пока не будет задействован соответствующий маршрут. Вот почему событие нажатия кнопки календаря не фиксируется - оно не существует в момент привязки.

Чтобы заставить его работать, вы можете попробовать это.

$('body').on('click', '#calendarButton', function() {...}); //a delegate

Хотя, я бы не рекомендовал это делать, поскольку это не "угловой" способ. Что будет лучше, это примерно следующее.

В вашем взгляде..

<button id="calendarButton" ng-click="clickFn()"/>

В вашем контроллере...

$scope.clickFn = function() { ... }