按指定範圍在另一個指令中插入指令

Question

我有一個指令是日期選擇器，另一個指令是引導面板。

我需要配置面板指令來顯示自定義標題和自定義內容，並且內容需要是日期選擇器指令或其他指令。

我想這樣做，但這麼想的工作原理：

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體

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