angularjs 指令 - 功能无法正常工作

Question

我正在尝试编写一个创建子菜单的指令。

我的想法是让这个指令非常灵活，这样我就可以在需要的时候重新使用它。

基本概念如下：

<my-submenu>
  <li my-function="test()">Test</li>
  <li my-function="test2()">Test 2</li>
  <li my-function="test3(id, type)">Test 3</li>
  <li ui-sref="test ({id: id})">Test 4</li> 
</my-submenu>

这是一个非常简单的模板。需要包含在我的子菜单中的所有元素都在指令声明中，如上所示。

指令部分：

angular.module('submenu', []).directive('mySubmenu', [
  function() {
    var linkFunction;

    linkFunction = function(scope, el, attr) {
      console.log("scope: ", scope);
      console.log("el: ", el);
      return console.log("Attr: ", attr);
    };

    return {
      restrict: 'E',
      transclude: true,
      templateUrl: './submenu.tpl.html',
      scope: {
        myFunction: '&'
      },
      link: linkFunction
    };
  }
]);

和指令模板：

<ul ng-transclude></ul>

现在，编译后的结果很像我想要的：

<my-submenu>
 <ul ng-transclude="">
  <li my-function="test()">Test</li>
  <li my-function="test2()">Test 2</li>
  <li my-function="test3(id, type)">Test 3</li>
  <li ui-sref="test ({id: id})">Test 4</li>
 </ul>
</hg-room-submenu>

但是这样做我失去了所有的功能，它们不再工作了。

我读到如果你想使用函数，你需要像我一样使用“&”，但它仍然不起作用。

有什么建议吗？而且，这是创建此类内容的最佳方法，还是我应该做一些不同的事情？

谢谢

PS：我也试过在编译代码中把my-function改成ng-click，还是不行。

这实际上是我需要帮助的另一件事 - 如何在编译的指令模板中将 my-function 转换为 ng-click？或者我可以只使用 ng-click 而不是 my-function 吗？

Answer 1

在指令内的嵌套元素上使用 my-function 对指令无关紧要。它将保持原样——一个无意义的属性。 & 属性绑定（就此而言 - 任何指令绑定）只有在与指令位于同一元素上时才有效。

在您的情况下，您只需在预编译的 HTML 中使用 ng-click。

附带说明一下，就 angular 的指令编译器而言，在编译指令后动态更改属性不会对指令或范围绑定产生任何影响。新属性不会被编译成指令或创建绑定到范围，删除的属性不会 "undo" 绑定到范围。指令编译器只会收集元素被编译时存在于元素上的属性。

angularjs 指令 - 功能无法正常工作

angularjs directive - functions not working properly

angularjs

angular-directive