javascript - 按范围将指令插入到另一个指令中

Question

我有一个指令是日期选择器，另一个指令是 Bootstrap 面板。

我需要配置面板指令以显示自定义标题和自定义内容，并且内容需要是日期选择器指令或另一个指令。

我正在尝试这样做，但不起作用:

html:

panel(title="Date", content='date-picker(ng-model="date")')

面板指令 html:

.col-md-12(style="padding: 0")
   .panel.panel-default
     .panel-heading
      h1.panel-title {{ title }}
    .panel-body
      {{content}}

面板指令js:

.directive("panel", function() {
    return {
       restrict: "E",
       templateUrl: "panel.html",
       link: function(scope, element, attrs, $eval) {
        scope.title = attrs.title;
        scope.content = eval(attrs.content);
       }
     };
  })

更新: 现在我有另一个问题:

我有一个在 View 上带有切换组件的指令。 切换组件的配置非常简单:

input(type="checkbox" checked data-toggle="toggle")

该指令工作正常，但如果该指令加载到另一个指令(嵌入)中，则切换组件将不再工作。 :(

你们能帮帮我吗？非常感谢。

Answer 1

您应该使用指令的 transinclude 选项，它可以让您轻松包装其他内容。

html:在面板元素中添加日期选择器 html

panel(title="Date")
  date-picker(ng-model="date")

面板指令 html:将 ng-transclude 添加到 .panel-body

.col-md-12(style="padding: 0")
   .panel.panel-default
     .panel-heading
      h1.panel-title {{ title }}
    .panel-body(ng-transclude)

面板指令 js:将 transinclude 设置为 true。

.directive("panel", function() {
    return {
       restrict: "E",
       templateUrl: "panel.html",
       transclude: true,
       link: function(scope, element, attrs) {
        scope.title = attrs.title;
       }
     };
  })