ng-click in指令不起作用

Question

card-drawer.html (template)

<div class="card-drawer-wrapper">
<div class="card-drawer-icon" ngClick="cdCtrl.toggle()">
    <i class="icon--{{ icon }}"/>
</div>
<div class="{{'card-drawer ' + (classesToAdd || '' )}}">
    <ng-transclude></ng-transclude>
</div>

cardDrawer.ts (directive and controller)

declare var _:UnderscoreStatic;

class CardDrawerController {
static $inject = [];

toggle() {
    alert('toggled');
}
}

CardDrawerDirective.$inject = [];

export interface ICardDrawerScope {
icon: string
classesToAdd: string
}

export interface ICardDrawerAttributes extends ng.IAttributes {
icon: string
'classes-to-add': string
}

export function CardDrawerDirective():ng.IDirective {
return {
    restrict: 'A',
    templateUrl: 'card-drawer.html',
    controller: CardDrawerController,
    controllerAs: 'cdCtrl',
    scope: true,
    replace: true,
    transclude: true,
    link(scope:ICardDrawerScope, element:ng.IAugmentedJQuery, attrs:ICardDrawerAttributes, controller:CardDrawerController) {
        scope.icon = attrs.icon || 'pencil';
    }
};
}

html (this is how i want to use it.)

<div card-drawer>
        Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
        risus. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
        Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit.                      
</div>

Answer 1

在div中尝试ng-click ，而不是ngClick来调用您的fn。