我正在尝试将一些内容加载到引导程序的弹出窗口中。此内容是隐藏div的html元素，除其他外，它们具有在对象列表下进行迭代的ng-repeat。好的，它可以工作。但是ng-click在popover内部不起作用。为了解决这个问题，根据我在stackoverflow中阅读的内容，当我将内容设置为popover时，我使用了$ compile选项。是的，它也可以。但是，当我这样做时，对象列表在其中显示为重复。有人可以告诉我怎么了吗？
angular.module("app", [])
.controller("progressBarCtrl", function($scope, $timeout, $compile) {
$scope.value = 90;
$scope.cursos = [
{ "nome": "Medicina", "percentual": "20" },
{ "nome": "Ciência da computação", "percentual": "90" }
];
$scope.showPopover = function() {
$("#main").popover("show");
}
$timeout(function() {
$scope.$apply(function() {
$("#main").popover({
container: 'body',
html: true,
content: function () {
return $compile($("#popper-content").html())($scope);
}
});
});
});
$scope.showAlert = function() {
alert();
};
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body ng-app="app" ng-controller="progressBarCtrl">
<div class="row">
<div class="col-md-3 col-md-offset-3" id="main" data-ng-mouseenter="showPopover()" data-placement="bottom" title="Progresso detalhado">
<h4>Progresso geral:</h4>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="100" style="width: {{value}}%">
{{value}}%
</div>
</div>
</div>
</div>
<div id="popper-content" class="hide" >
<div data-ng-repeat="curso in cursos">
<h3>{{curso.nome}}:</h3>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="{{curso.percentual}}" aria-valuemin="0" aria-valuemax="100" style="width: {{curso.percentual}}%">
{{curso.percentual}}%
</div>
</div>
<div ng-click="showAlert()">click-me</div>
</div>
</div>
</body>答案非常复杂。在后台，重复执行两次。一旦应用程序加载，因为它就位于应用了Angular控制器的元素（主体）内部的DIV中。
为了使这项工作正常进行，您不仅需要使用CSS“隐藏”模板内容，还需要将其隐藏在Angular中。您可以通过放置模板和外部文件（到目前为止，最常见的是实际应用程序）或使用script标签来做到这一点。
另外，在示例代码中，您将作用域应用在$ timeout内；这不是必需的，$ timeout会为您调用它。
请参阅以下插件，我认为它现在可以满足您的需求。
http://plnkr.co/edit/jKtG1W1V9a6MZI5uVPdP?p=preview
最重要的代码：
$timeout(function() {
$("#main").popover({
container: 'body',
html: true,
content: function () {
return $compile($templateCache.get('popper-content'))($scope);
}
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句