Zach Dziura Zach Dziura - 1 year ago 295
AngularJS Question

Angular 1.5 Component callback binding not executing

I'm attempting to create a search button on a webpage that, when clicked, will display a modal dialog that prompts the user to enter in their search query. The search button is a Floating Action Button, a la Material Design, that displays specific "search types" when hovering over the button (exactly the same as the example found on the Materialize CSS buttons page). I've defined a method on the parent controller that will simply log a message to the console in order to test that this functionality works. The method is passed to the search button component using Angular's

syntax, and is being called from the search's HTML template using the default
controller name.

However, I'm finding that the callback isn't being called at all when clicking on the relevant button, and I'm not entirely sure as to why. There are no errors or anything being displayed. Can anyone take a look? Below is the relevant code. The component in question is called
, for Floating Action Button.


<body data-ng-app="app" data-ng-cloak>
<div class="wrapper" data-ng-controller="ctrl">
<div class="content" ui-view="content"></div>

<fab data-on-button-click="ctrl.onButtonClick($message)"></fab>

<script type="text/javascript" src="build/app.bundle.js"></script>


import angular from 'angular';
import controller from './app.controller';
import routing from './app.routing';
import Fab from './components/fab';

.component('fab', Fab)
.controller('ctrl', controller)


export default class AppController {
constructor($document) {
this.document = $document;

onButtonClick($message) {

AppController.$inject = ['$document'];


import view from './fab.html';

let Fab = {
template: view,
bindings: {
onButtonClick: '&'

export default Fab;


<div class="fab__container">
<a class="fab__main blue">
<img class="fab__icon" src="./search.svg">

<ul class="fab__options">
<li class="fab__option-wrapper" data-active>
<label class="fab__text">Search Type 3</label>
<div class="fab__option red" data-ng-click="$ctrl.onButtonClick({$message: 'Type 3'})">
<a class="fab__icon--small">&</a>

<li class="fab__option-wrapper" data-active>
<label class="fab__text">Search Type 2</label>
<div class="fab__option yellow" data-ng-click="$ctrl.onButtonClick({$message: 'Type 2'})">
<a class="fab__icon--small">@</a>

<li class="fab__option-wrapper" data-active>
<label class="fab__text">Search Type 1</label>
<div class="fab__option green" data-ng-click="$ctrl.onButtonClick({$message: 'Type 1'})">
<a class="fab__icon--small">#</a>

Note how when the user clicks on the relevant
, Angular's
directive should trigger and execute the callback function. But it's not!

rob rob
Answer Source

You are not using the "controller as" syntax when you define your controller so ctrl is not defined in your view. Try this

<div class="wrapper" ng-controller="ctrl as ctrl">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download