Question

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

我需要配置panel指令来显示自定义标题和自定义内容，内容需要是日期选择器指令或其他指令。

我正在尝试这样做，但是没有用：

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);
       }
     };
  })

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

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

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

该指令工作正常，但如果该指令在另一个指令（transclude）中加载，则切换组件不再起作用。：（

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

Answer 1

您应该使用该指令的transclude选项，这样您就可以轻松地包装其他内容。

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：将transclude设置为true。

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

按范围在另一个指令中插入指令

1 个答案: