我正在尝试使用有角度的UI pop over来制作popover。我加载了html并使其符合HTml,但是当我运行程序并单击ICon(我在其中显示pop over的星形图标)时,我得到了undefined错误不是一个函数吗?
http://plnkr.co/edit/o0mVZujOH0Apqurvq9xX?p=预览
我用了这些线
<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: '@'
}
};
});
第一个问题是由于您再次在底部导入了jQuery(正如其他人已经提到的那样)。因此,删除最后的jQuery导入。
主要问题是scope.items
未定义的,因此您永远不会进入if
,从而popOverContent
保持未定义的状态。您可能打算使用:
...
$scope: {
items: '@',
...
}
另请参见此修改后的plunkr。
不直接相关的问题,但这里是一个修改实施的的popOver
指令。我对其进行了一些更改(以使其尽可能少地更改),例如,它不再具有隔离作用域,不使用固定模板等。
这些按钮均按预期工作。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句