コンポーネントからjavascript関数を呼び出すAngularJS

Question

私はAngularのコンポーネントを初めて使い、自分のウェブサイトのヘッダー/フッターを作成しようとしています。

これは私のコントローラと同じファイルで宣言した私の現在のヘッダコンポーネントです。

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>', 

}); 

ヘッダーコンポーネントタグを使用してヘッダーを含めると、ログアウト機能が動作しません。このコンポーネントの外部で宣言されている関数を使用するにはどうすればよいですか？ありがとう！

Answer 1

同じファイルにいるだけでは不十分です。コンポーネントを定義するときは、使用するコントローラをangularJsに指定するか、デフォルトのコントローラ（基本的には空の関数）を使用する必要があります。さらに、コンポーネントはcontroller-as構文を使用しているため、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 
});