angular directive child click

Question

I'm wanting to write a directive in order to make a fab speed dial menu (https://material.angularjs.org/0.10.1-rc1/#/demo/material.components.fabSpeedDial) reusable, and although I can get everything working visually, I am having some problem with the "click" on a button ...

first of all, the directive itself:

angular.module('myApp')
.directive('myMenu',function(){

    var ctrl = function () {
        var controller = this;
    };

    return {
        restrict: 'E',
        controller: ctrl,
        controllerAs: 'controller',
        bindToController: true,
        templateUrl: 'directives/myMenu.html',

        scope: {
            actions: '=',
            class: '@',
        }
    };
});

and the template is

<md-fab-speed-dial md-direction="up" class="bottom-right">
    <md-fab-trigger>
        <md-button aria-label="menu" class="md-fab md-warn">
            <md-icon md-font-icon="fa-plus" class="fa display-block icon-size-24" ></md-icon>
        </md-button>
    </md-fab-trigger>

    <md-fab-actions ng-repeat="action in controller.actions">
        <md-button aria-label="{{action.label}}" class="md-fab md-raised md-mini {{action.class}}" ng-click="action.click">

            <md-icon md-font-icon="{{action.icon}}" class="fa display-block icon-size-18" ></md-icon>
        </md-button>
    </md-fab-actions>

</md-fab-speed-dial>

a snippet from the parent controller

    controller.mainMenu = [ 
       {
            label: "Open",
            click: "controller.open(true)",
            class: "md-primary",
            iconClass: 'fa',
            icon: "fa-folder-open-o",
        }
    ];

and, finally, the calling html

<my-menu actions="controller.mainMenu"/>

so, the problem I have is that the function defined by the action.click is never called. Is there a way of doing this, or am I going to have to create a "click" handler in the controller ?

David Votrubec · Accepted Answer · 2015-07-16 12:29:59Z

0

the ng-click should contain reference to function call. So you need to change this ng-click="action.click" to this ng-click="action.click()"

Another think is that you are using controllerAs: 'controller' but in template you are referencing action. So maybe there should be controller.click()?

UPDATE In case that action.click points to reference to function defined in action object, than I would suggest this solution

   //in controller
   $scope.invoke = function(fn) {
    //sanity check
    if (angular.isFunction(fn)) {
     fn();
     //or perhaps?
     fn.call(this);
    }        
   }

edited Jul 16, 2015 at 12:29

answered Jul 16, 2015 at 9:00

David Votrubec

4,1843 gold badges35 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jmls Over a year ago

thanks for the response - action is derived from ng-repeat="action in controller.actions" in the parent controller, each action is defined as an object, and the code click: "controller.open(true)", does reference a function - so really what I need to do is to get to the function defined in the action.click object

Collectives™ on Stack Overflow

angular directive child click

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related