Question

我想写一个指令，以便让一个fab快速拨号菜单（https://material.angularjs.org/0.10.1-rc1/#/demo/material.components.fabSpeedDial）可重复使用，虽然我可以让所有东西都在视觉上运行，但我对＃34感到有些问题;点击＆＃34;在按钮上......

首先，指令本身：

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: '@',
        }
    };
});

，模板是

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

来自父控制器的片段

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

，最后，调用html

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

所以，我遇到的问题是从不调用action.click定义的函数。有没有办法做到这一点，或者我将不得不创建一个＆＃34;点击＆＃34;控制器中的处理程序？

Answer 1

ng-click应包含对函数调用的引用。因此，您需要将此ng-click="action.click"更改为此ng-click="action.click()"

另一种想法是你使用的是controllerAs: 'controller'，但在模板中你引用的是action。那么也许应该有controller.click()？

<强>更新如果action.click指向引用操作对象中定义的函数，那么我建议使用此解决方案

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

角度指令儿童点击

1 个答案: