mirror of
https://github.com/nasa/openmct.git
synced 2025-02-01 00:45:41 +00:00
[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.
This commit is contained in:
parent
942f617bd8
commit
b4a44dee8f
@ -4,7 +4,7 @@
|
||||
{
|
||||
"key": "mctInclude",
|
||||
"implementation": "MCTInclude.js",
|
||||
"depends": [ "templates[]", "$sce" ]
|
||||
"depends": [ "templates[]", "$sce", "$http", "$compile" ]
|
||||
},
|
||||
{
|
||||
"key": "mctRepresentation",
|
||||
|
@ -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: "=" }
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user