javascript - 从组件 AngularJS 调用 javascript 函数

Question

我是 Angular 组件的新手，正在尝试为我的网站创建页眉/页脚。

这是我当前的 header 组件，我在与 Controller 相同的文件中声明。

app.component('headerComponent', {

    template: '<div class="header"><div class="container"><div class="row">
    <div class="col-md-5"><!-- Logo --><div class="logo"><h1><a 
    href="adminHome.html">'+ localStorage.getItem('username')+'</a></h1>
    </div></div><div class="col-md-5"><div class="row"><div class="col-lg-
    12"></div></div></div><div class="col-md-2"><div class="navbar navbar-
    inverse" role="banner"><nav class="collapse navbar-collapse bs-navbar-
    collapse navbar-right" role="navigation"><ul class="nav navbar-nav"><li 
    class="dropdown"><a href="" class="dropdown-toggle" data-
    toggle="dropdown">My Account <b class="caret"></b></a><ul 
    class="dropdown-menu animated fadeInUp"><li><a 
    href="profile.html">Profile</a></li><li><a href ng-
    click="logout();">Logout</a></li></ul></li></ul></nav></div></div></div>
    </div></div>',

});

当我尝试使用 header 组件标签来包含我的 header 时，我的注销功能不起作用。如何使用在此组件外部声明的函数？谢谢!

Answer 1

仅仅位于同一个文件中是不够的。当你定义组件时，你需要告诉 angularJs 使用什么 Controller ，否则它将使用默认 Controller (基本上是一个空函数)。此外，组件使用 Controller 作为语法，因此您不能只调用 logout()，您需要调用 $ctrl.logout()。例如:

// I did the controller as a constructor function, but you could also do a class
const MyController = function ($log) {
   this.logout = function () {
      $log.info('you clicked the logout button!);
   }
}

app.component('headerComponent', {
    template: '<a ng-click="$ctrl.logout()">hello world</a>,
    controller: MyController
});