I am trying to make popover using angular UI pop over .I load my html and complile that HTml but when I run my program and click ICon (star icon where I am showing pop over ) I am getting error undefined is not a function?
http://plnkr.co/edit/o0mVZujOH0Apqurvq9xX?p=preview
I used these lines
<td ><span pop-over items="items", title="Mode of transport" class="glyphicon glyphicon-star content"></span> </td>
app.directive('popOver', function ($compile) {
var itemsTemplate ="<div ng-controller='AfterCtrl'><ul class='list-group'><li class='list-group-item' ng-click='editRowName()'>Edit</li><li class='list-group-item ' ng-click='deleteRow($index)'>Delete</li></ul></div>" ;
var getTemplate = function (contentType) {
var template = '';
switch (contentType) {
case 'items':
template = itemsTemplate;
break;
}
return template;
}
return {
restrict: "A",
transclude: true,
template: "<span ng-transclude></span>",
link: function (scope, element, attrs) {
var popOverContent;
if (scope.items) {
var html = getTemplate("items");
popOverContent = $compile(html)(scope);
}
var options = {
content: popOverContent,
placement: "bottom",
html: true,
title: "aa"
};
$(element).popover(options);
},
scope: {
items: '=',
title: '@'
}
};
});
The first issue is due to your importing jQuery again at the bottom (as others have already mentioned). So, remove the last jQuery import.
The main issue is that scope.items
is undefined, so you never get inside the if
and thus popOverContent
remains undefined. You probably mean to use:
...
$scope: {
items: '@',
...
}
See, also, this modified plunkr .
Not directly related to the question, but here is a modified implementation of the popOver
directive. I have changed it a bit (to make it working with as little changes as possible), eg it doesn't have an isolate scope any more, it doesn't use a fixed template etc.
The buttons are working as expected.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.