我在我的 SPA 网站中使用 Angularstrap 作为 UI 组件。我有一个模态女巫,我动态创建它,例如以下代码:
$scope.modal = $modal(
{ controller: "testCtrl",
show : false,
placement : top
});
我有几个按钮,如下所示:
<button type="button" ng-click="setTemplate(1)" ></button>
<button type="button" ng-click="setTemplate(2)" ></button>
在我的 Controller 中我有这个功能:
$scope.setTemplate = function (val){
if (val == 1){
$scope.modal.templateUrl ="path/to/firsttemp.html" ;
}else if (val== 2){
$scope.modal.templateUrl ="path/to/secondtemp.html" ;
}
}
现在,当我单击每个按钮时,我的模式为空。
最佳答案
你可以这样改变,
在 app.js 中,
$scope.open = function (val) {
if (val == 1){
$scope.modal.templateUrl ="path/to/firsttemp.html" ;
}else if (val== 2){
$scope.modal.templateUrl ="path/to/secondtemp.html" ;
}
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: $scope.modal.templateUrl ,
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.items;
}
}
});
在 HTML 中,
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="path/to/firsttemp.html">
<div class="modal-header">
<h3 class="modal-title">This is template 1</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<script type="text/ng-template" id="path/to/secondtemp.html">
<div class="modal-header">
<h3 class="modal-title">This is template 2</h3>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open('1')">template 1</button>
<button type="button" class="btn btn-default" ng-click="open('2')">template 2</button>
</div>
笨蛋link对于相同的。
希望这有帮助。 .:)
关于javascript - 如何动态更改 Angular 引导模式的templateUrl?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33198322/