gpt4 book ai didi

javascript - header 上的函数不起作用 - AngularJs 和 Javascript

转载 作者:行者123 更新时间:2023-12-02 21:45:51 24 4
gpt4 key购买 nike

我需要在我的网站标题上放置一些功能,但这些功能不起作用...

我正在使用 AngularJs 和 Javascript 构建我的网站。接下来是我的 index.html:

<!DOCTYPE html>
<html ng-app="adminApp">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/css/admin.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">

<head>

<base href="/">

</head>
<body>

<div ng-include="'app/components/include/header.html'"></div>


<ng-view></ng-view>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-cookies.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.62/vfs_fonts.js"></script>
<script src="app/app.js"></script>
<script src="app/components/home/admin-home.js"></script>
<script src="app/components/test/test.js"></script>
<script src="app/components/include/header.js"></script>
<script src="app/factories/admin-factory.js"></script>
<script src="app/routes/admin-route.js"></script>

</body>
</html>

如您所见,我正在调用 ng-include div 上的头文件。

还有我的 header.html 文件:

<section class="admin-header">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<a id="admin-logo"><img src="/logo.png" /></a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 hide" id="login" align="center">
<button type="button" class="btn btn-user" id="jump-btn">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
</button>
</div>
</div>
</section>
<div class="menu-out">
<button type="button" class="btn btn-logout" id="logout">Log out</button>
</div>

因此,此时一切正常:标题出现在每个页面上。但是如果我需要注销按钮上的功能,我该怎么做?

我尝试创建一个 home.js 文件,如下一个:

(function(){

var head = {
templateUrl: '/app/components/include/header.html',
controller: headCtrl
};

angular
.module('adminApp')
.component('adminHead', head);

headCtrl.$inject = ["$http", "$scope"];
function headCtrl($http, $scope){
$scope.getOut = function(){
alert('Log out');
}
}

})();

然后,使用ng-click在按钮上添加该功能:

<div class="menu-out">
<button type="button" class="btn btn-logout" id="logout" ng-click="getOut()">Log out</button>
</div>

但是该功能不起作用。

有人知道为什么不起作用并帮助我,如果可能的话请举例说明?如果我在脚本标记之间的 html 上添加该函数,但我需要查找是否可以使用 $scope

希望你能帮助我。提前感谢

最佳答案

声明一个 Controller :

angular
.module('adminApp')
.controller('adminHeadCtrl', headCtrl);

headCtrl.$inject = ["$http", "$scope"];
function headCtrl($http, $scope){
$scope.getOut = function(){
alert('Log out');
}
}

使用 ng-controller 指令实例化 Controller :

<div class="menu-out" ng-controller="adminHeadCtrl">
<button type="button" ng-click="getOut()" id="logout">Log out</button>
</div>

欲了解更多信息,请参阅

关于javascript - header 上的函数不起作用 - AngularJs 和 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60254582/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com