angularjs，需要使字符串格式的json對象屬性值被渲染爲實際模板

我有以下json數組，其中每個對象在特定選項卡上單擊訪問。數組中的每個json對象都有不同的模板，例如它們可以表示ui-grid或c3圖表指令（c3.js）等。angularjs，需要使字符串格式的json對象屬性值被渲染爲實際模板

現在，當用戶單擊特定選項卡時，此模板當前以字符串格式需要要進行渲染像UI格，C3-圖表等實際模板

var sampleJsonArray = [{ 
     id: 0, 
     tabName: "Table", 
     template: ' <div id="queryListGrid" ui-grid="queryListGridOptions" class="grid query-list-grid"></div>' 
    }, 
    { 
     id: 1, 
     tabName: "Cost - Line", 
     template: ' <c3-simple id="view1" config="c3ChartCost"></c3-simple> ' 
    }, 
    { 
     id: 2, 
     tabName: "Spend - Bar", 
     template: ' <c3-simple id="view2" config="c3ChartSpend"></c3-simple> ' 
    }, 
];

以下是每個標籤模板樣本jsons：

$scope.queryListGridOptions = { 
     enableSorting: true, 
     columnDefs: [{ 
       field: 'name' 
      }, 
      { 
       field: 'gender' 
      }, 
      { 
       field: 'company', 
       enableSorting: false 
      } 
     ], 
     data: //data will be fetched from http call -- [] 
      onRegisterApi: function(gridApi) { 
       $scope.grid1Api = gridApi; 
      } 
    }; 

$scope.c3ChartCost = { 
    size: { 
     height: 250, 
     width: 200 
    }, 
    data: { 
     columns: [ 
      ['data1', 30, 200, 100, 400, 150, 250], 
      ['data2', 130, 100, 140, 200, 150, 50] 
     ], 
     type: 'line' 
    } 
}; 
$scope.c3ChartSpend = { 
    size: { 
     height: 250, 
     width: 200 
    }, 
    data: { 
     columns: [ 
      ['data1', 5, 510, 160, 700, 190, 960], 
      ['data2', 87, 450, 56, 780, 670, 890] 
     ], 
     type: 'bar' 
    } 
};

來源

2017-02-21 Madasu K

您可能需要使用$sce服務的角度提供。嚴格上下文轉義（SCE）是AngularJS在特定上下文中要求綁定的模式，以便爲該上下文使用標記爲安全的值。我沒有太多時間爲您提供工作代碼片段。從角度檢查此documentation。如果您以後需要任何幫助，請告知我。

來源

2017-02-21 07:56:41

angularjs，需要使字符串格式的json對象屬性值被渲染爲實際模板

回答

相關問題