我在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>
在我的控制器中我有这个功能:
$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" ;
}
}
现在,当我点击每个按钮时,我的模态为空。
答案 0 :(得分:1)
你可以这样改变,
在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;
}
}
});
in 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>
plunker link也是如此。
希望这会有所帮助。 :)