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

Posted 2023-03-06

【中文标题】使用 JavaScript 在 AngularJS Bootstrap UI 中调用模式窗口

【英文标题】：Invoking modal window in AngularJS Bootstrap UI using JavaScript

【发布时间】：2013-04-22 08:43:32

【问题描述】：

使用提到的示例here，如何使用 javascript 调用模态窗口而不是单击按钮？

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

谢谢

【参考方案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

【讨论】：

@AhmadAlfy 是的，有一些选项可以让您控制模态的视觉方面。但更重要的是，它有很多超能力，让你可以像对待 AngularJS 路由一样对待 $dialogs，在主窗口和模态窗口（以及返回）之间传递数据等。

是的，角度网站上的自述文件链接也已损坏。我真的很想读那个文件，但我不知道它隐藏在哪里。 :(

似乎 $dialog 已被 $modal 的重写版本取代：github.com/angular-ui/bootstrap/tree/…

And here's some more info on the dialog re-write.

对于像我这样，回到 Bootstrap 2.3.2 和 Angular-UI-Bootstrap 0.5.0 的人，我认为现在已经失效的 $dialog 上的最新文档会到这里来：github.com/angular-ui/bootstrap/commit/…

【参考方案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 -->

【参考方案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

【讨论】：

太棒了。但是为什么你在解决传递空存储然后添加$scope.opts.resolve.item = function() ？

仅用于代码读取。你可以肯定写，resolve: item: function()return ..

【参考方案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。

希望这会有所帮助！

【参考方案5】：

又快又脏！

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

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

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

现在，

在角度控制器内部，您想要触发模态的地方只需使用

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

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

【讨论】：

这真的是一个好的 做法吗？这是推荐的还是不鼓励的？使用这种方式，它如何影响性能？ 当然写一行代码比写一个完整的函数容易 但是，还是

就像我说的“这不是一个好方法......”，因为它与 Angular 的设计范式不一致。我认为这是因为这个原因而气馁。对于性能部分 - 我认为它不会造成任何差异。但是，如果我是专家，我不应该遵循这种捷径。这只是完成工作的一种快速而肮脏的方式。 :) 如果您发现有关此的内容，请告诉我。

我是 Angular 的新手，为了让我的模态正常运行，这确实非常有效。一旦我了解了如何（并且这个里程碑的截止日期已经过去），我就可以回来并正确地做它

【参考方案6】：

与 Maxim Shoustin 提供的不同版本

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

我想将 modal 的模板放在隐藏的 <div> 中，并将内部 html 与名为 modal_html_template 的范围变量绑定 主要是因为我认为将模板的 html 放在 <div> 中而不是 <script id="..."> 中更正确（并且在 WebStorm/PyCharm 中处理更舒适）

调用$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();
    
  
);

【讨论】：

这些项目的链接没有出现在你的 plunker 中 - 不幸的是，我仍然很新 w/ angular 来确定原因。