javascript - ngbpopover - ngbtooltip

Archivo HTML como contenido en la ventana emergente Bootstrap en la directiva AngularJS

Question

Tengo una directiva angular para manejar las ventanas emergentes de Bootstrap como se muestra en el código a continuación. En mi directiva, estoy configurando el contenido del popover a una cadena HTML, lo que creo que es feo. Lo que quiero hacer es usar un archivo "template.html" en lugar de HTMLstring. De esa manera, podré usar la misma directiva con diferentes archivos de plantilla dependiendo del tipo de ventana emergente que quiera mostrar. Ese es mi plan de todos modos.

Entonces, ¿cómo puedo cargar de la mejor manera el código html de mi template.html y usarlo en lugar de la cadena HTML en la directiva de AngularJs a continuación?

app.directive(''mypopover'', function ($compile) {
var HTMLstring = "<div><label class=''control-label'' style=''color: rgb(153, 153,153)''>Search</label>&nbsp;&nbsp;"+"<input placeholder=''Search assignment'' ng-model=''searchText'' type=''text'' class=''form-control''> <br>"+"<label class=''control-label'' style=''color: rgb(153, 153, 153)''>Select an assignable</label>"+"<p ng-repeat=''p in projects | filter:searchText''ng-click=''createEvent(user.id,date)''>"+"{{p.title}}</p></div>";
var getTemplate = function (contentType) {
var template = '''';
switch (contentType) {
case ''user'':
template = HTMLstring;
break;
}
return template;
}
return {
restrict: "A",
link: function (scope, element, attrs) {
var popOverContent;
if (scope.user) {
var html = getTemplate("user");
popOverContent = $compile(html)(scope);
}
var options = {
content: popOverContent,
placement: "right",
html: true,
date: scope.date
};
$(element).popover(options);
},
scope: {
user: ''='',
date: ''=''
}
};
});

Answer 1

Para completar la respuesta de Khahn, si carga una plantilla dinámica, la última parte debería verse así:

return {
restrict: "A",
scope: {
item: "=" // what needs to be passed to the template
},
link: function(scope, element, attrs) {
getTemplate("user").then(function(popOverContent) {
var options = {
content: $compile($(popOverContent))(scope),
placement: "bottom",
html: true,
trigger: "hover"
};
$(element).popover(options);
});
}

};

Answer 2

Una solución rápida es utilizar templateCache con plantilla en línea:

Plantilla en línea:

<script type="text/ng-template" id="templateId.html">
This is the content of the template
</script>

Js:

app.directive(''mypopover'', function ($compile,$templateCache) {
var getTemplate = function (contentType) {
var template = '''';
switch (contentType) {
case ''user'':
template = $templateCache.get("templateId.html");
break;
}
return template;
}

DEMO

Si necesita cargar plantillas externas, debe usar ajax $ http para cargar las plantillas manualmente y colocarlas en el caché. Luego puede usar $templateCache.get para recuperar más tarde.

$templateCache.put(''templateId.html'', YouContentLoadedUsingHttp);

Código de muestra:

var getTemplate = function(contentType) {
var def = $q.defer();
var template = '''';
switch (contentType) {
case ''user'':
template = $templateCache.get("templateId.html");
if (typeof template === "undefined") {
$http.get("templateId.html")
.success(function(data) {
$templateCache.put("templateId.html", data);
def.resolve(data);
});
} else {
def.resolve(template);
}
break;
}
return def.promise;
}

DEMO