Angularjs - контекстное меню в ячейке таблицы

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 is not a function at 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 переменную доступную внутри сферы, поскольку она является частью factures. Вот почему, когда вы делаете var iam = $scope[($attrs.contextmenuItem)];, значение iam не определено.

The reason behind it crashes at line contextMenuCtrl.open(iam, event ); because your contextMenuCtrl doesn't have method open in that directive controller

Я предлагаю вам пройти использовать изолированные сферы, как вы хотите, чтобы держать след на 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; 
     }); 
    } 
    } 
}]); 

Ваш код contextmenuContainer директива должна быть как below.Must ВГА e, связанный с этой директивой, и который должен содержать открытый метод, определенный в области видимости.

contextmenuContainer Директива

app.directive('contextmenuContainer', [function() { 
    return { 
     restrict: 'A', 
     scope: {}, 
     link: function($scope, $element, $attrs, contextMenuCtrl) { 
      //if its there you can have code here 
     }, 
     controller: function($scope) { //this must be here- 
      //the methods defined here will be exposed to the directive 
      //which inherits it using require. 
      $scope.open = function() { 
       //code here 
      }; 
      //you could have other methods to. 
     } 
    } 
}]);