[英]Html file as content in Bootstrap popover in AngularJS directive
我有一個Angular指令來處理Bootstrap popovers,如下面的代碼所示。 在我的指令中,我將彈出窗口內容設置為HTML字符串,我覺得這很難看。 我想做的是使用“template.html”文件而不是HTMLstring。 通過這種方式,我可以使用相同的指令和不同的模板文件,具體取決於我想要顯示的popover類型。 無論如何,那是我的計划。
那么,我如何以最好的方式從我的template.html加載html代碼並使用它而不是下面的AngularJs指令中的HTMLstring?
app.directive('mypopover', function ($compile) {
var HTMLstring = "<div><label class='control-label' style='color: rgb(153, 153,153)'>Search</label> "+"<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: '='
}
};
});
一個快速的解決方案是使用帶有內聯模板的templateCache:
內聯模板:
<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;
}
如果需要加載外部模板,則需要使用ajax $ http手動加載模板並放入緩存中。 然后您可以使用$templateCache.get
稍后檢索。
$templateCache.put('templateId.html', YouContentLoadedUsingHttp);
示例代碼:
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;
}
要完成Khahn的答案,如果加載動態模板,最后一部分應如下所示:
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);
});
}
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.