我正在寻找一种更好的方法来在click
弹出窗口上实现折线图/条形图,以根据单击的标签(x 轴)显示项目列表。
我的应用程序控制器中的当前实现是这样的:
$scope.onClick = function (points, evt) {
//console.log(points, evt);
// length of points array is determined by how many series you have
if (points.length > 0) {
// call service to get some data based on label that was clicked on
GetKVP.get({
groupId: $scope.GroupId,
type: $scope.Grouping,
label: points[0].label, // label is the same no matter how many points you have
}).$promise.then(
function (data) {
if (data.success) {
if (data.kvps.length > 0) {
var html = "<div class='temp popover' style='display: block; position: absolute; top: " + evt.pageY + "px; left: " + evt.pageX + "px;'><div class='popover-inner'><h3 class='popover-title'>KVPs</h3><div class='popover-content'>";
angular.forEach(data.kvps, function (val, key) {
html += "<a class='' data-ng-click='OpenKVP(" + val.Id + ")'>" + val.Name + "</a><br>";
});
html += "</div></div></div>";
$("div.app-container").append(html);
} else {
// do nothing
}
}
}, function (error) {
// report that error has occured
});
}
// remove popover after 30 seconds
//todo: this needs a better implementation as it doesn't take into account how long it takes to fetch the data
$timeout(function () {
$("div.temp").remove();
}, 30000); // deafult delay is 0 milliseconds
};
总结一下,当用户点击图表时,我的应用程序会获取与标签对应的项目列表并将其显示在弹出窗口中。
我的问题是,当我单击该弹出ngClick
绑定中的项目时,不会触发。让我相信我错误地绑定了我的弹出模板。
我可以用 jQuery 做点什么,但为什么我首先要使用 angular;正确的?
或者,我可以创建一个可以正确绑定的部分/内联模板。但是有了这个实现,我不知道如何在每次点击时实例化多个弹出窗口。
参考:
AngularJS - scrip angular-chart.js UI
Bootstrap - popover
更新:
我偶然发现了这个建议使用. 通过这样做,角度解析了 html,然后连接了我的.
$compile
ngClick
导致对上面的代码进行以下更改:
$("div.app-container").append($compile(html)($scope));