AngularJS 从指令中获取 $event [英] AngularJS getting $event from a directive

问题描述

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

如果我使用链接函数(未包含在我的小提琴中)，我可以获得 $event，但我不能在正确的范围内 $parse/$eval 它.

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

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

-

var app = angular.module('app', []);app.directive('checkbox', function ($parse) {返回 {限制:'E'，替换:真的，范围: {cbModel: '=',cbClick: '&'},模板:'<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 = 真；$scope.y = true;$scope.test = 函数 (ev, b) {console.log('测试调用，ev 是'，ev，'b 是'，b);返回xyz"；}});

解决方案

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

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

使用此 HTML:

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

小提琴

来自指令页面，指令定义对象"部分:

<块引用>

通常希望通过表达式将数据从隔离作用域传递到父作用域，这可以通过将局部变量名称和值的映射传递到表达式包装器 fn 中来完成.例如，如果表达式是 increment(amount) 那么我们可以通过将 localFn 调用为 localFn({amount: 22}) 来指定金额值代码>

Seems pretty simple, but I can't get $event to bubble up from my directive. When test gets called from cb-click, $event is undefined, but outside of a directive (via html), it's the event object.

If I use a linking function (not included in my fiddle), I can get $event, but I can't $parse/$eval it against the right scope.

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

解决方案

You need to use this syntax inside your directive:

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

With this HTML:

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

Fiddle

From the directives page, section "Directive Definition Object":

Often it's desirable to pass data from the isolated scope via an expression and to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22})

这篇关于AngularJS 从指令中获取 $event的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！