Question

我使用角度指令生成嵌套列表，其模型结构如下：

{
  items: [{
    type: "section",
    name: "Section 1",
    items: [{
      type: "section",
      name: "Section 1-1",
      items: [{
        type: "product",
        name: "Bag",
        sku:"xyz"
      }, {
        type: "article",
        name: "Polo"
      }, {
        type: "product",
        name: "T-Shirt",
        sku:"abt"
      }]
    }, {
      type: "section",
      name: "Section 1-2",
      items: [{
        type: "product",
        name: "Bat",
        sku:"x4ty"
      }, {
        type: "article",
        name: "Golf"
      }, {
        type: "info",
        name: "Map"
      } ,{
        type: "product",
        name: "Racket",
        sku:"jkg56"
      }]
    }]
  }, {
    type: "section",
    name: "Section 2",
    items: [{
      type: "section",
      name: "Section 2-1",
      items: [{
        type: "article",
        name: "Headline"
      }, {
        type: "article",
        name: "Sport"
      }]
    }]
  }]
}

我想要实现的是根据项目的类型动态构建这个树。

以下是我正在尝试做的事情（它不起作用!!）。

plunker demo

这个想法是我希望能够添加新类型的项目（目前产品和文章，但我肯定会更多）。

我正在尝试触发class.html属性的指令，如items.html模板中所示 - 这显然不起作用。

底线 - 我想根据当前范围模型的type属性加载单独的指令，或者动态选择模板和链接函数。

Answer 1

您可以使用$ compile执行此操作。

app
  .directive('adminItem', function($compile){
    return {
      restrict: "A",
      replace: true,
      template: "<div></div>",
      scope: {
        item: '=adminItem'
      },
      link: function(scope, element, attrs, ctrl) {
        element.append($compile('<div admin-' + scope.item.type +'="item"></div>')(scope));
      }
    };
  })

以下是更新后的plnkr。

它并不完美，但它可以解决这个问题。我使用了属性指令，但它可以使用任何类型。

基于模型属性的角度指令

1 个答案: