[英]Adding a dynamic directive inside another directive template in AngularJS
我想在另一個指令臨時模板中添加動態指令。 如您所見,我想在指令模板內添加另一個指令。如何在其中添加那些動態指令
請幫忙
return {
restrict: 'AE',
require :'^awkGrid',
templateUrl: 'views/shutter.html',
link : function(scope, element, attr, controllerInstance){
//Set the header
scope.items = [];
angular.forEach(scope.rowData, function(value, key) {
var obj = {
key : key,
value : value
};
template = <country name="'+value.country+'" id="'+key+'"></country>;
scope.items.push(template);
});
};
//Inside shutter.html file
<div data-ng-repeat="item in items" class="ag-row action-row"
ng-class-odd="'ag-row-even'"
ng-class-even="'ag-row-odd'"
ng-class="{'ag-row-selected':$index == selectedRow}"
ng-click="setClickedRow($index,$event)">
<div class="ag-cell">
{{item}} //Not working ,Prinitng the string
<country name="india" id="-1"></country> //Working
</div>
您必須重新編譯指令。 在鏈接功能的末尾添加以下代碼:
$compile(element.contents())(scope);
答案在這里 。
當然,您必須將服務$compile
作為依賴項添加到指令中。
要動態切換指令的整個模板,您必須將元素的html設置為所需的新模板,然后將元素的內容傳遞到$compile
以將其與$scope
綁定。
element.html('<h1>Dynamic Content</h1>').show();
$compile(element.contents())($scope);
所有這些都應在相關指令的link
函數中定義。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.