Question

我试图为我的角度应用程序创建一个上下文菜单指令。我希望这个指令可以用于需要上下文菜单的应用程序中的任何元素。

问题是在我的应用程序中有许多用户控件，即 - 用于扩展按钮，输入，网格等的指令。如果我尝试将my-context-menu指令放在任何其中我得到multidir error，因为这两个指令都是定义模板。

上下文菜单指令如下所示：

angular.module('myApp').directive('myContextMenu', function () {

    var myContextMenu= {};

    myContextMenu.restrict = 'A';

    myContextMenu.templateUrl = 'templates/myContextMenuTemplate.html';

    // Here I have scope and controller with all the functionality

    return myContextMenu;
});

另一个指令例如：

angular.module('myApp').directive('myGrid', function () {

    var myGrid= {};

    myGrid.restrict = 'E';

    myGrid.templateUrl = 'templates/myGridTemplate.html';

    // Here I have scope, controller and link function with all the functionality

    return myGrid;
});

我想在网格上有一个上下文菜单，并且在grid指令中我将能够访问上下文菜单控制器。

我尝试的是：<my-grid id="grid" my-context-menu />按预期失败了......

您对如何实现这一目标有任何解决方案或其他想法吗？

提前致谢！

我的角度版本：1.3.8

Answer 1

您可以在指令对象的控制器属性上编写相同控制器的指令之间共享控制器。并且您可以使用transclude将html嵌入到具有自己模板的指令中。 https://docs.angularjs.org/api/ng/directive/ngTransclude

AngularJS在同一元素上使用模板的两个指令

1 个答案: