From b4a44dee8f79e47e5d361206ea3f123c1f4bab50 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 28 Oct 2015 11:13:53 -0700
Subject: [PATCH] [Representation] Populate mct-include contents
Remove usage of ng-include and template from mct-include for
compatibility with element-level transclusion. Has useful
side effect of pre-fetching templates and reducing watch
count.
---
platform/representation/bundle.json | 2 +-
platform/representation/src/MCTInclude.js | 69 ++++++++++++++---------
2 files changed, 43 insertions(+), 28 deletions(-)
diff --git a/platform/representation/bundle.json b/platform/representation/bundle.json
index 331856a9a8..6d782b5d95 100644
--- a/platform/representation/bundle.json
+++ b/platform/representation/bundle.json
@@ -4,7 +4,7 @@
{
"key": "mctInclude",
"implementation": "MCTInclude.js",
- "depends": [ "templates[]", "$sce" ]
+ "depends": [ "templates[]", "$sce", "$http", "$compile" ]
},
{
"key": "mctRepresentation",
diff --git a/platform/representation/src/MCTInclude.js b/platform/representation/src/MCTInclude.js
index 88d3a3378a..2abbd8ba9c 100644
--- a/platform/representation/src/MCTInclude.js
+++ b/platform/representation/src/MCTInclude.js
@@ -54,9 +54,49 @@ define(
* @param {TemplateDefinition[]} templates an array of
* template extensions
*/
- function MCTInclude(templates, $sce) {
+ function MCTInclude(templates, $sce, $http, $compile, $log) {
var templateMap = {};
+ function loadTemplate(path) {
+ return $http.get(path).then(function (response) {
+ return $compile(response.data);
+ });
+ }
+
+ function addTemplate(key, $scope, element) {
+ // Pass the template URL to ng-include via scope.
+ //$scope.inclusion = templateMap[$scope.key];
+ // ...and add the template to the DOM.
+ templateMap[key].then(function (template) {
+ template($scope, function (innerClone) {
+ element.append(innerClone);
+ });
+ }, function () {
+ $log.warn("Could not load template " + key);
+ delete templateMap[key];
+ });
+ }
+
+ function link($scope, element, attrs, ctrl, transclude) {
+ var originalElement = element,
+ activeElement = element;
+
+ $scope.$watch('key', function (key) {
+ if (templateMap[key]) {
+ transclude(function (clone) {
+ activeElement.replaceWith(clone);
+ activeElement = clone;
+ activeElement.empty();
+ addTemplate(key, $scope, activeElement);
+ });
+ } else if (activeElement !== originalElement) {
+ // If the key is unknown, remove it from DOM entirely.
+ activeElement.replaceWith(originalElement);
+ activeElement = originalElement;
+ }
+ });
+ }
+
// Prepopulate templateMap for easy look up by key
templates.forEach(function (template) {
var key = template.key,
@@ -66,30 +106,9 @@ define(
template.templateUrl
].join("/"));
// First found should win (priority ordering)
- templateMap[key] = templateMap[key] || path;
+ templateMap[key] = templateMap[key] || loadTemplate(path);
});
- function link($scope, element, attrs, ctrl, transclude) {
- var originalElement = element,
- activeElement = element;
-
- $scope.$watch('key', function (key) {
- if (templateMap[key]) {
- // Pass the template URL to ng-include via scope.
- $scope.inclusion = templateMap[$scope.key];
- // ...and add the template to the DOM.
- transclude(function (clone) {
- activeElement.replaceWith(clone);
- activeElement = clone;
- });
- } else if (activeElement !== originalElement) {
- // If the key is unknown, remove it from DOM entirely.
- activeElement.replaceWith(originalElement);
- activeElement = originalElement;
- }
- });
- }
-
return {
transclude: 'element',
@@ -103,10 +122,6 @@ define(
// Use the included controller to populate scope
link: link,
- // Use ng-include as a template; "inclusion" will be the real
- // template path
- template: '<ng-include src="inclusion"></ng-include>',
-
// Two-way bind key, ngModel, and parameters
scope: { key: "=", ngModel: "=", parameters: "=" }
};