个人中心
gpt4 book ai didi

JavaScript 不适用于使用 ng-include 路由的元素

转载 作者：行者123 更新时间：2023-12-03 08:28:56 27 4
gpt4 key购买 nike

在下面的代码中，#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> 
...

脚本.js

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

app.js(不确定这是否有必要)

另外，我如何引用这个文件？路由器？抱歉，这是我第一天使用 Angular。

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

最佳答案

如果您使用 ng-include 或 ng-route 进行路由，则在调用适用的路由之前，这些路由中的元素不会呈现。这就是日历按钮点击事件未被捕获的原因 - 它在您绑定(bind)时不存在。

要让它工作，你可以尝试这个..

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

不过，我不建议这样做，因为它不是“有 Angular ”的方式。更好的是像下面这样..

在你的视野中..

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

在您的 Controller 内...

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

关于JavaScript 不适用于使用 ng-include 路由的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33427617/

27 4 0
文章推荐： javascript - Google 电子表格脚本 "Cell reference out of range"
文章推荐： r - 如何用R中的NA输出替换函数错误？
文章推荐： syntax-error - “when”附近: syntax error in VHDL
文章推荐： javascript - 使用超链接将值传递到文本框(在另一页上)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com