Question

如何从AngularJs中的另一个文件调用函数？我将在所有页面中使用相同的标题，因此我需要调用其中的函数。

到目前为止，这是我的代码。首先，我的索引：

    <!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/home/admin-home.js"></script>
<script src="app/components/include/header.js"></script>
<script src="app/factory/admin-factory.js"></script>
<script src="app/routes/admin-route.js"></script>

</body>
</html>

然后是app.js：

(function(){
    'use strict';

    angular
        .module('adminApp', ['ngResource', 'ngRoute']);
})();

标题的HTML：

<section class="admin-header">
    <div class="row">
        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
            <h1>Admin test</h1>
        </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="open()">
                <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">Logout</button>
</div>

一切正常，直到这里还可以。现在，我的疑问是，如果标头将与其中将存在的所有页面分开，该如何调用函数来切换.menu-out div？

我已经尝试过使用header.js文件，如下所示：

(function(){

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

    angular
        .module('adminApp')
        .component([], head);

    headCtrl.$inject = ["$scope"];
    function headCtrl($scope){

        $scope.open = function(){
            $('.menu-out').toggle();
        }

    }

})();

但是不起作用。如您所见，我已经在组件中添加了括号，因为我不知道是否需要从routes.js文件中调用标题。

这是route.js文件：

(function(){
    'use strict';

    angular
        .module('adminApp')
        .config(config);

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

        $routeProvider

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

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

})();

我需要使用$rootScope吗？有人可以指导我。如我所说，我正在使用AngularJs，HTML和Javscript。

谢谢。

Answer 1

module.component方法的第一个参数应为用于命名组件的字符串：

angular
    .module('adminApp')
    ̶.̶c̶o̶m̶p̶o̶n̶e̶n̶t̶(̶[̶]̶,̶ ̶h̶e̶a̶d̶)̶;̶
    .component("adminHome", head);

有关更多信息，请参见

AngularJS angular.module Type API Reference - component

从另一个文件AngularJs调用函数

1 个答案: