Javascript Angularjs-表格单元格上的上下文菜单_Javascript_Angularjs_Contextmenu

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

javascript angularjs

Javascript Angularjs-表格单元格上的上下文菜单,javascript,angularjs,contextmenu,Javascript,Angularjs,Contextmenu,我需要在单击表格单元格时实现上下文菜单。我已经尝试过这个看起来不错的模块：但当我尝试使用它时： <table class="table table-bordered" contextmenu-container="main.contextmenu"> <tbody> <tr ng-repeat="facture in factures" contextmenu-i

我需要在单击表格单元格时实现上下文菜单。我已经尝试过这个看起来不错的模块：
但当我尝试使用它时：

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

...

它在这条线上崩溃：

contextMenuCtrl.open( iam, event );

有人使用这个模块吗？这是一个已知问题吗？

当前您的问题是在属性中传递

facture

对象，该属性是元素之一，您将永远不会在作用域中有可用的

facture

变量，因为它是

facture

的一部分。这就是为什么在执行

var iam=$scope[（$attrs.contextmenuItem）]未定义iam
的值
它崩溃的原因在第contextMenuCtrl.open行（iam，事件
);contextMenuCtrl
中没有方法open
指令控制器
我建议您通过使用隔离作用域，因为您希望跟踪使用ng repeat
渲染的facture
，那么您的隔离作用域将具有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;
      });
    }
  }
}]);

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.
        }
    }
}]);

您的contextmenuContainer
指令代码应如下所示。必须具有与该指令关联的控制器，并且必须包含在范围中定义的打开方法
contextmenuContainer指令
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;
      });
    }
  }
}]);

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.
        }
    }
}]);

当前您的问题是，您正在传递facture
对象内部属性，该属性是元素之一，您将永远不会在范围内有可用的facture
变量，因为它是facture
的一部分。这就是为什么在执行var iam=$scope[（$attrs.contextmenuItem）]未定义iam
的值
它崩溃的原因在第contextMenuCtrl.open行（iam，事件
);contextMenuCtrl
中没有方法open
指令控制器
我建议您通过使用隔离作用域，因为您希望跟踪使用ng repeat
渲染的facture
，那么您的隔离作用域将具有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;
      });
    }
  }
}]);

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.
        }
    }
}]);

您的contextmenuContainer
指令代码应如下所示。必须具有与该指令关联的控制器，并且必须包含在范围中定义的打开方法
contextmenuContainer指令
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;
      });
    }
  }
}]);

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.
        }
    }
}]);

谢谢你的回答，实际上问题不在iam上，而在contextMenuCtrl.open上，contextMenuCtrl似乎没有定义。@user1260928你能添加contextMenuCtrl
指令代码吗..它必须有带有open
方法的控制器吗？不，它没有。同一pb与未定义的contextMenuCtrl相同。@user1260928您能为同一pb创建一个plunkr吗？谢谢您的回答，实际上问题不在iam上，而在contextMenuCtrl.open上，contextMenuCtrl似乎未定义。@user1260928您能否添加contextMenuCtrl
指令代码..它必须有带有open
methodHi的控制器，不，它没有。同一pb与未定义的contextMenuCtrl相同。@user1260928您能为同一pb创建一个plunkr吗？谢谢您的回答，实际上问题不在iam上，而在contextMenuCtrl.open上，contextMenuCtrl似乎未定义。@user1260928您能否添加contextMenuCtrl
指令代码..它必须有带有open
methodHi的控制器，不，它没有。与未定义的contextMenuCtrl相同的pb。@user1260928能否为相同的pb创建一个plunkr？