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>

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

我读过如果你想使用功能，你需要使用“＆amp;”就像我在做，但它仍然无法正常工作。

有什么建议吗？而且，这是创造这样的东西的最佳方法，还是我应该采取不同的做法？

由于

PS：我还尝试在编译的代码中将my-function更改为ng-click，但仍然没有。

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

Answer 1

在指令内的嵌套元素上使用my-function对指令无关紧要。它将保持原样 - 一个毫无意义的属性。 &属性绑定（以及任何指令绑定）只有在与指令相同的元素上才有效。

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

作为旁注，在编译指令后动态更改属性不会对指令或作用域绑定产生任何影响 - 就angular的指令编译器而言。新属性不会被编译成指令或创建与范围的绑定，并且已删除的属性将不会＆＃34;撤消＆＃34;绑定到范围。指令编译器将仅在元素编译时收集元素上存在的属性。

angularjs指令 - 函数无法正常工作

1 个答案: