Question

如何从Angular中的指令引发事件？我正在考虑类似于ng-click的东西。

例如，我正在尝试创建以将引导菜单包装为上下文菜单指令。我希望在点击某个项目时触发一个事件。我通过将控制器中的click事件设置为指令的范围属性并从指令内部调用它来实现它。这是“正确”的方式吗？

HTML：

<div ng-app='App'>
    <div ng-controller="MyCtrl">
        Item Clicked: {{item}}

        <ul context-menu class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" context-click="onClick">
          <li><a tabindex="-1" href="#" ng-click="contextMenuClick('Action')">Action</a></li>
          <li><a tabindex="-1" href="#" ng-click="contextMenuClick('Another action')">Another action</a></li>
          <li><a tabindex="-1" href="#" ng-click="contextMenuClick('Something else')">Something else here</a></li>
          <li class="divider"></li>
          <li><a tabindex="-1" href="#" ng-click="contextMenuClick('Separated link')">Separated link</a></li>
        </ul>
    </div>
</div>

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

app.controller('MyCtrl', function ($scope) {
    $scope.item = "";
    $scope.onClick = function(item) {
        $scope.item = item;
    };
});

使用Javascript：

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

app.controller('MyCtrl', function ($scope) {
    $scope.item = "";
    $scope.onClick = function(item) {
        $scope.item = item;
    };
});

app.directive("contextMenu", function () {
    return {
        restrict: 'A',
        scope: {
            contextClick: '='
        },
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                post: function postLink(scope, iElement, iAttrs, controller) {
                    scope.contextMenuClick = function (item) {
                        scope.contextClick.call(scope.$parent, item);
                    };

                    // Show the menu
                    iElement.css({
                        display: 'block',
                        top: '100px'
                    });

                }
            };
        }
    };
});

Answer 1

将事件处理程序设置为指令上的属性。我认为它可能看起来更像ng-click但是这样可行。

jsFiddle here

HTML：

<div ng-app='App'>
    <div ng-controller="MyCtrl">
        Item Clicked: {{item}}

        <ul context-menu class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" context-click="onClick">
          <li><a tabindex="-1" href="#")">Action</a></li>
          <li><a tabindex="-1" href="#")">Another action</a></li>
          <li><a tabindex="-1" href="#")">Something else here</a></li>
          <li class="divider"></li>
          <li><a tabindex="-1" href="#")">Separated link</a></li>
        </ul>
    </div>
</div>

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

app.controller('MyCtrl', function ($scope) {
    $scope.item = "";
    $scope.onClick = function(item) {
        $scope.item = item;
    };
});

使用Javascript：

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

app.controller('MyCtrl', function ($scope) {
    $scope.item = "";
    $scope.onClick = function(item) {
        $scope.item = item;
    };
});

app.directive("contextMenu", function () {
    return {
        restrict: 'A',
        scope: {
            contextClick: '='
        },
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                post: function postLink(scope, iElement, iAttrs, controller) {
                    scope.contextMenuClick = function (item) {
                        scope.contextClick.call(scope.$parent, item);
                    };

                    // Show the menu
                    iElement.css({
                        display: 'block',
                        top: '100px'
                    });

                }
            };
        }
    };
});

从角度指令引发事件

1 个答案: