javascript - 如何使它在AngularJs中的单个标头上工作

问题描述

我正在使用 AngularJs，我想在我的所有页面上使用一个标题。对于页面，我使用的是 ng-route。现在，我想对注销按钮（位于标题中）进行测试，但无法正常工作。这是我的索引

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

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Admin Test</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="app/app.js"></script>
<script src="app/components/login/admin-login.js"></script>
<script src="app/components/home/admin-home.js"></script>
<script src="app/routes/admin-route.js"></script>

</body>
</html>

这是我的标题的 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="myimagesource" /></a>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" id="login" align="center">
            <button type="button" class="btn btn-user" ng-click="logout()">
                <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
            </button>
        </div>
    </div>
</section>

我的标题代码：

(function(){

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

    angular
        .module('adminApp')
        .component('adminHead', head);
        headCtrl.$inject = ["$scope"];
        function headCtrl($scope){

            $scope.logout = function(){
                console.log('Success');
            }

        }

})();

组件上的adminHead来自我的路由文件：

(function(){
    'use strict';

    angular
        .module('adminApp')
        .config(config);
        config.$inject = ["$routeProvider", "$locationProvider"];
        function config($routeProvider, $locationProvider){
            $locationProvider.hashPrefix('');

            $routeProvider

                .when('/', {
                    template: '<admin-login></admin-login>'
                })

                .when('/head', {
                    template: '<admin-head></admin-head>'
                })

                .when('/home', {
                    template: '<admin-home></admin-home>'
                })                

                .otherwise({
                    redirectTo: '/'
                });
        }

})();

当我单击注销按钮时，没有任何反应。有人可以指导我吗？无论我在哪个页面（登录或主页），我该怎么做才能使功能正常工作？有什么东西不见了？

我正在使用 AngularJs 和 Javascript，以及用于 HTML 的 Bootstrap。

提前谢谢。

标签： javascriptangularjs

javascript - 如何使它在AngularJs中的单个标头上工作

问题描述

解决方案

推荐阅读