具有动态内容的Angular指令

时间:2016-04-20 03:22:30

标签: angularjs ionic-framework

我在this punkr创建了一个用于离子角度的手风琴切换。

我打算实现的目的是将其转换为可以如下使用的指令,其中内容基于用户插入的html是动态的。它可以是表单,文本或简单的按钮。怎么可能呢?

<custom-accordion title="Header 1">
    Content 1
</custom-accordion>


<custom-accordion title="Header 2">
        Text: <input type="text" style="background: grey;" /><br>
        Number: <input type="number" style="background: grey;" /><br>
 </custom-accordion>

1 个答案:

答案 0 :(得分:3)

您可以为accordion创建指令,然后根据范围变量动态加载内容。您可能必须为所需的内容创建单独的HTML文件。这是一个plunkr

<强>指令

onPostExecute

<强> HTML

AsyncTask

修改
这个plunkr将模型从每个表单暴露给控制器 的指令

valueList

HTML

adapter.notifyDataSetChanged()

控制器

angular.module('starter.directives', [])
.directive("dynamicAccordion", function() {
  return {
    restrict:"A/E",
    scope: {
      content: "@"
    },
    template:"<div ng-include=getContent()></div>",
    link: function(scope) {
      scope.getContent = function() {
        return scope.content;
      },
      scope.toggleContent = function() {
        scope.isShow = !scope.isShow;
      },
      scope.isShow = true;
    }
  }
});