AngularJS从指令中获取$ event

时间:2013-04-16 17:00:07

标签: angularjs angularjs-directive

看起来很简单,但是我无法从我的指令中获得$ event。从test调用cb-click时,$event未定义,但在指令之外(通过html),它是事件对象。

如果我使用链接功能(不包括在我的小提琴中),我可以获得$event,但我无法在正确的范围内解析/ $ eval它。

http://jsfiddle.net/langdonx/KgcGY/

<div ng-app="app" ng-controller="x">
    <!-- via directive -->
    <checkbox cb-model="y" cb-click="test($event, b)"></checkbox>
    <!-- via html -->
    <div><input id="c2" type="checkbox" ng-model="x" ng-click="test($event, 'a')"> <label for="c2">{{x}}</label></div> 
</div>

-

var app = angular.module('app', []);

app.directive('checkbox', function ($parse) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            cbModel: '=',
            cbClick: '&'
        },
        template: '<div><input id="c1" type="checkbox" ng-model="cbModel" ng-click="cbClick($event, \'a\')"> <label for="c1">{{cbModel}}</label></div>'
    };
});

app.controller('x', function x($scope) {
    $scope.x = true;
    $scope.y = true;
    $scope.test = function (ev, b) {
        console.log('test called, ev is', ev, 'b is', b);
        return 'xyz';
    }
});

1 个答案:

答案 0 :(得分:10)

您需要在指令中使用此语法:

ng-click="cbClick({ev: $event, b:\'a\'})

使用此HTML:

cb-click="test(ev, b)"

Fiddle

directives page,“指令定义对象”部分:

  

通常需要通过表达式将数据从隔离范围传递到父范围,这可以通过将局部变量名称和值的映射传递到表达式包装器fn来完成。例如,如果表达式为increment(amount),那么我们可以通过将localFn称为localFn({amount: 22})来指定金额值