Вызов пользовательской директивы angular js внутри popover data-content
Я написал новую директиву (showfor) для включения popover в моем пользовательском интерфейсе, используя angular и bootstrap. директива showfor работает внутри html, но не внутри data-content. Мне нужен поповер, чтобы показать список (а не весь массив). Любая помощь будет оценена.
Код является:
'use strict';
var isbnApp = angular.module('plunker', []);
isbnApp.directive('mypopover', function() {
return function(scope, element) {
element.popover();
};
});
isbnApp.directive('showfor',function(){
return{
restrict:"AEC",
template:"<li data-ng-repeat='item in records'>{{item.imageType}}</li>"
};
});
isbnApp.controller('popCtrl', function($scope) {
$scope.records = [{
"imageType": "JPEG",
"rendition": "cover_80"
}, {
"imageType": "TIFF",
"rendition": "cover_20"
}];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Content Discovery</title>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="angular.js@*" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.9/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
</head>
<body>
<div class="container" data-ng-controller="popCtrl">
<br />
<a mypopover="" tabindex="0" role="button"
class="btn btn-primary btn-sm"
data-container="body" data-toggle="popover"
data-html="true" title="<b>Coltrane Data</b>"
data-content="<showfor></showfor>">
Coltrane
</a>
<showfor></showfor>
</div>
</body>
</html>
См. Ссылку на plunkr для демонстрации: https://plnkr.co/edit/aJF4QIlGbMdpHZAvU8m9?p=preview
1 ответ
Решение
HTML внутри data-content не компилируется, поэтому для этого нужно добавить угловую директиву.
Соответствующая директива была взята из ссылки ниже, проверьте ссылку также
.directive('popover', function($compile, $timeout){
return {
restrict: 'A',
link:function(scope, el, attrs){
var content = attrs.content; //get the template from the attribute
var elm = angular.element('<div />'); //create a temporary element
elm.append(attrs.content); //append the content
$compile(elm)(scope); //compile
$timeout(function() { //Once That is rendered
el.removeAttr('popover').attr('data-content',elm.html()); //Update the attribute
el.popover(); //set up popover
});
}
}
})
JSFiddle: https://jsfiddle.net/Kai_Draord/b9eogz1v/1/
Ссылка: угловой загрузчик поповер