使用MobileAngularUI动态生成模态

时间:2015-09-04 14:13:20

标签: angularjs mobile-angular-ui

我正在为我的移动网络应用程序使用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() }}">&times;</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生成模态的任何解决方法?

由于

1 个答案:

答案 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。

我做到了,成功了!