Question

当我点击表格单元格时，我需要实现一个上下文菜单。我试过这个看起来不错的模块：https://github.com/ds82/angular-contextmenu
但是当我试图使用它时：

    <table class="table table-bordered" contextmenu-container="main.contextmenu">
                    <tbody>
                        <tr ng-repeat="facture in factures"   contextmenu-item="facture">

...

我在右键单击事件中收到此错误：

TypeError：undefined不是函数在http://localhost:8080/assets/js/directives/contextmenu.js:74:27

错误的指令是：

app.directive('contextmenuItem', [function() {
  return {
    restrict: 'A',
    require: '^contextmenuContainer',
    scope: false,
    link: function( $scope, $element, $attrs, contextMenuCtrl ) {

      var iam = $scope[( $attrs.contextmenuItem )];
      $element.on( pointerEvents, function( event ) {
        $scope.$apply(function() {
          contextMenuCtrl.open( iam, event );
        });
        event.stopPropagation();
        return false;
      });
    }
  }
}]);

它在这一行崩溃了：

contextMenuCtrl.open( iam, event );

有人使用这个模块吗？这是一个众所周知的问题吗？

Answer 1

目前您的问题是您正在传递facture对象内部属性，这是元素之一，您将永远不会在范围内提供facture变量，因为它是{{1}的一部分}。这就是为什么当你factures时var iam = $scope[( $attrs.contextmenuItem )];的值未定义。

它背后的原因在iam行崩溃，因为你的contextMenuCtrl.open( iam, event );没有方法contextMenuCtrl 指令控制器

我建议您传递使用隔离范围，因为您希望跟踪使用open呈现的facture，然后您的隔离范围将ng-repeat将facture : '='对象传递给指令

<强>指令

facture

你的app.directive('contextmenuItem', [function() { return { restrict: 'A', require: '^contextmenuContainer', scope: { facture: '=' }, link: function( $scope, $element, $attrs, contextMenuCtrl ) { //var iam = $scope[( $attrs.contextmenuItem )]; $element.on( pointerEvents, function( event ) { $scope.$apply(function() { //`contextMenuCtrl` should have method open in its controller contextMenuCtrl.open( $scope.facture, event ); }); event.stopPropagation(); return false; }); } } }]);指令代码应该如下所示。必须有与该指令相关联的控制器，并且必须包含在范围内定义的open方法。

contextmenuContainer Directive

contextmenuContainer

Angularjs - 表格单元格上下文菜单

1 个答案: