Question

问题的标题可能不清楚我想要做的是创建一个我可以这样使用的指令：

<menu-item title="var1" state="var2">
   <menu-item title="var3" state="var4">
   </menu-item>
   <menu-item title="var5" state="var6">
      <menu-item title="var7" state="var8">
      </menu-item>
   </menu-item>
</menu-item>

当然，指令menuItem必须生成正确的html。

Answer 1

答案就像将transclude: true' to the directive and then add ng-transclude`添加到您希望渲染子项的此指令的模板一样简单：

(function () {
    'use strict';

    angular.module('myModule')
        .directive('menuItem', menuItem);

    menuItem.$inject = [];

    function menuItem() {
        var menuItemTemplate =
            '<li>\
              <a ui-sref="{{state ? state : "javascript:;"}}">\
                <span class="title"> {{label}} </span>\
              </a>\
              <ul ng-transclude class="sub-menu">\
              </ul>\
             </li>';

        var directive = {
            restrict: 'E',
            replace: true,
            template: menuItemTemplate,
            transclude: true,
            scope: {
                state: '@',
                label: '@'
            },
            link: function (scope, element, attrs) {
            }
        };

        return directive;
    }

})();

现在我们就像我在问题中提到的那样使用它

如何构建指令接受相同的嵌套指令呢？

1 个答案: