0

Angular でディレクティブからイベントを発生させるにはどうすればよいですか? ng-click に似たものを考えています。

たとえば、ブートストラップ メニューをコンテキスト メニュー ディレクティブとしてラップするように作成しようとしています。アイテムがクリックされたときに発生するイベントが必要です。コントローラーのクリックイベントをディレクティブのスコーププロパティとして設定し、ディレクティブ内から呼び出すことで機能します。これは「正しい」方法ですか？

ここでjsFiddle

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

                }
            };
        }
    };
});
4

1 に答える 1

0

イベント ハンドラーをディレクティブのプロパティとして設定します。ng-click のように見えるかもしれないと思いましたが、これは機能します。

ここでjsFiddle

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

                }
            };
        }
    };
});
于 2013-07-08T00:41:05.270 に答える