angularjs, необходимо сделать значения свойств объекта json в формате строки, которые будут отображаться как фактические шаблоны

Question

У меня есть следующий массив json, к которому каждый объект обращается к определенному щелчку на вкладке. Каждый json-объект массива имеет разные шаблоны, такие как они могут представлять ui-grid или директиву c3 chart (c3.js) и т. Д.

Теперь, когда пользователь нажимает на определенную вкладку, этот шаблон, который в настоящее время находится в строковом формате, требует должны быть сделаны, чтобы сделать фактические шаблоны как Ui-сетки, с3-диаграммы и т.д.

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

Answer 1

Вы, возможно, придется использовать $sce обслуживание обеспечивается угловым , Строгое контекстное экранирование (SCE) - это режим, в котором AngularJS требует привязки в определенных контекстах для получения значения, которое помечено как безопасное для использования в этом контексте. У меня нет много времени, чтобы предоставить вам фрагмент рабочего кода прямо сейчас. Оформить заказ documentation от углового. Дайте мне знать, если вам понадобится помощь позже.