Question

我有一个带有数组的Angular控制器和两个定义的函数：

anApp.controller('OneCtrl', ['$scope', function ($scope) {
  $scope.edit = function(){
    console.log('edit');
  },
  $scope.delete = function(){
    console.log('delete');
  },
  $scope.menuOptions = [
    {
      label: 'Edit',
      function: 'edit'
    },
    {
      label: 'Delete',
      function: 'delete'
    }
  ]
}]);

观点：

<div ng-app="app">
  <div ng-controller="OneCtrl">
    <div id="menu-container" custom-menu="{{menuOptions}}"></div>
  </div>
</div>

我想在menu-container添加一个从控制器调用不同功能的链接列表。我有许多控制器具有不同的菜单选项和一些dom操作（未包含在示例中）所以我决定使用此属性指令创建菜单列表：

anApp.directive('customMenu', function() {
    return {
      restrict: 'A',
      link: function(scope, elem, attr){
        var contextMenuDiv = '<ul id="contextmenu-ul">';
            var menuOptionFn = [];
            JSON.parse(attr.customMenu).forEach(function(option, index){
              menuOptionFn.push(new Function('name', 'console.log("menuOptionFn ");scope.' + option.function+'();'));
              contextMenuDiv += '<li class="contextmenu-item" ng-click="$event.stopPropagation();menuOptionFn[' + index + ']()">' + option.label + '</li>';
            });
            contextMenuDiv += '</ul>';

            menuOptionFn[0]();
      }
    };
});

但是这给了我这个控制台错误： ReferenceError：未定义范围。我不知道为什么在Function构造函数中看不到scope。

以下是（非）工作示例：https://codepen.io/neptune01/pen/GQwQQd

使用Angular指令中的Function构造函数创建动态菜单，范围未见

0 个答案: