我正在为我的移动网络应用程序使用Mobile Angular UI框架。
This Page解释了如何生成模态的指令(它们略微改变了引导框架)
我设法重现这个例子,但是当我将指令包装在ng-repeat中以生成多个模态时,它不再起作用了
<div ui-content-for="modals">
<div ng-repeat="p in UseCaseCtrl.getProjects()" >
<div class="modal" ui-if="modal{{ p.getId() }}" ui-state="modal{{ p.getId() }}">
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="modal{{ p.getId() }}">×</button>
<h4 class="modal-title">{{ p.getName() }}</h4>
</div>
<div class="modal-body">
...Lorem...
</div>
<div class="modal-footer">
<button ui-turn-off="modal{{ p.getId() }}" class="btn btn-default">Close</button>
<button ui-turn-off="modal{{ p.getId() }}" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
据我所知,问题似乎来自ui-state =“modal {{p.getId()}},因为当我只对那个硬编码时它会再次起作用(即设置ui-state =” modal1" )
我错过了什么吗?使用ng-repeat生成模态的任何解决方法?
由于
答案 0 :(得分:1)
我在控制器中使用ng-click = "functionName(p.getId())
而不是ui-turn-on="modal{{ p.getId() }}
。
详细说明:
$scope.functionName = function (id) {
SharedState.initialize($rootScope, 'modal'+id);
$rootScope.Ui.turnOn( 'modal'+id);
};
注意:您需要在控制器中注入SharedState。
我做到了,成功了!