angularjs - 使用 JavaScript 在 AngularJS Bootstrap UI 中调用模式窗口

Question

使用此处提到的示例，如何使用 JavaScript 而不是单击按钮来调用模式窗口？

我是 AngularJS 的新手，并尝试在这里和这里搜索文档，但没有运气。

谢谢

Answer 1

好的，首先http://angular-ui.github.io/bootstrap/有一个<modal>指令和$dialog服务，这两者都可以用来打开模态窗口。

不同之处在于，<modal>模态的指令内容嵌入在宿主模板中（触发模态窗口打开的模板）。该$dialog服务更加灵活，允许您从单独的文件加载模态的内容，以及从 AngularJS 代码中的任何位置触发模态窗口（这是一个控制器、一个服务或另一个指令）。

不确定“使用 JavaScript 代码”的确切含义，但假设您指的是 AngularJS 代码中的任何位置，该$dialog服务可能是一种可行的方法。

它非常易于使用，并且以最简单的形式您可以编写：

$dialog.dialog({}).open('modalContent.html');  

为了说明它可以由任何 JavaScript 代码真正触发，这里有一个使用计时器触发模式的版本，在控制器实例化 3 秒后：

function DialogDemoCtrl($scope, $timeout, $dialog){
  $timeout(function(){
    $dialog.dialog({}).open('modalContent.html');  
  }, 3000);  
}

这可以在这个 plunk 中看到：http ://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview

$dialog最后，这里是这里描述的服务 的完整参考文档： https ://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md

Answer 2

要使 angular ui $modal 与 bootstrap 3 一起使用，您需要覆盖样式

.modal {
    display: block;
}
.modal-body:before,
.modal-body:after {
    display: table;
    content: " ";
}
.modal-header:before,
.modal-header:after {
    display: table;
    content: " ";
}

（如果您使用自定义指令，则最后一个是必需的）并将 html 封装为

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

Answer 3

打开模态窗口，将数据传递给对话框

如果有人有兴趣将数据传递给对话：

app.controller('ModalCtrl', function($scope,  $modal) {
      
      $scope.name = 'theNameHasBeenPassed';

      $scope.showModal = function() {
        
        $scope.opts = {
        backdrop: true,
        backdropClick: true,
        dialogFade: false,
        keyboard: true,
        templateUrl : 'modalContent.html',
        controller : ModalInstanceCtrl,
        resolve: {} // empty storage
          };
          
        
        $scope.opts.resolve.item = function() {
            return angular.copy(
                                {name: $scope.name}
                          ); // pass name to resolve storage
        }
        
          var modalInstance = $modal.open($scope.opts);
          
          modalInstance.result.then(function(){
            //on ok button press 
          },function(){
            //on cancel button press
            console.log("Modal Closed");
          });
      };                   
})

var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {
    
     $scope.item = item;
    
      $scope.ok = function () {
        $modalInstance.close();
      };
      
      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
}

演示Plunker

Answer 4

AngularJS Bootstrap 网站尚未使用最新文档进行更新。大约 3 个月前，pkozlowski-opensource 编写了一个将 $modal 从 $dialog 提交中分离出来的更改，如下所示：

https://github.com/angular-ui/bootstrap/commit/d7a48523e437b0a94615350a59be1588dbdd86bd

在该提交中，他为 $modal 添加了新文档，可以在下面找到：

https://github.com/angular-ui/bootstrap/blob/d7a48523e437b0a94615350a59be1588dbdd86bd/src/modal/docs/readme.md。

希望这可以帮助！

Answer 5

快速而肮脏的方式！

这不是一个好方法，但对我来说这似乎是最简单的。

添加一个包含模态数据目标和数据切换的锚标记，并具有与之关联的 id。（可以在 html 视图中的任何位置添加）

<a href="" data-toggle="modal" data-target="#myModal" id="myModalShower"></a>

现在，

在角度控制器内部，您想从那里触发模态只需使用

angular.element('#myModalShower').trigger('click');

这将根据角度代码模拟对按钮的单击，并且将出现模式。

Answer 6

与 Maxim Shoustin 提供的不同版本

我喜欢这个答案，但困扰我的部分是<script id="...">用作模态模板的容器。

我想将模态的模板放置在隐藏中<div>，并将内部 html 与一个名为的范围变量绑定，modal_html_template 主要是因为我认为将模板的 html 放在 a<div>而不是<script id="...">

调用时将使用此变量$modal({... 'template': $scope.modal_html_template, ...})

为了绑定内部 html，我创建inner-html-bind了一个简单的指令

查看示例 plunker

<div ng-controller="ModalDemoCtrl">

    <div inner-html-bind inner-html="modal_html_template" class="hidden">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </div>

    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>

inner-html-bind指示：

app.directive('innerHtmlBind', function() {
  return {
    restrict: 'A',
    scope: {
      inner_html: '=innerHtml'
    },
    link: function(scope, element, attrs) {
      scope.inner_html = element.html();
    }
  }
});