Мне нужно поместить некоторые функции в заголовок моего сайта, но функции просто не работают ...
Я создаю свой сайт с AngularJs и Javascript. Далее my 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.
и файл my 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.
Надеюсь, вы мне поможете. Спасибо заранее