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


Answers:


75

好的,因此,首先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);  
}

可以从以下示例中看出这一点:http ://plnkr.co/edit/u9HHaRlHnko492WDtmRU? p= preview

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


1
@AhmadAlfy是的,有一些选项可让您控制模态的视觉方面。但更重要的是,它具有许多超级功能,可让您像对待AngularJS路线一样对待$ dialogs,在主窗口与模态(和返回)之间传递数据等
。– pkozlowski.opensource

是的,自述链接在角度站点上也断开了。我真的很想读取该文件,但是我不知道它的隐藏位置。:(
蒂姆·高

27
好像$对话框已经换成$模式的改写版本:github.com/angular-ui/bootstrap/tree/...
每在追寻Aronsson


1
对于那些像我一样的人,回到Bootstrap 2.3.2和Angular-UI-Bootstrap 0.5.0,我认为现在已经停销的
FOR

29

为了使角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: " ";
}

(如果使用自定义指令,则最后一个是必需的),并使用

<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 -->

26

打开模式窗口,将数据传递到对话框

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

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()
安东·曼尼夫斯基

2
仅用于代码读取。您可以肯定地说,resolve:{ item: function(){return ..} }
Maxim Shoustin

17

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

希望这可以帮助!


17

快速而肮脏的方式!

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

添加一个包含模态数据目标和数据切换的锚标记,并具有与之关联的ID。(几乎可以添加到html视图中的任何位置)

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

现在,

在角度控制器内部,您要从其触发模态的位置即可使用

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

这将根据角度代码模拟单击按钮,然后将出现模态。


这实际上是一个 习惯吗?是推荐还是不鼓励这样做?使用这种方式如何影响性能?当然,编写代码行比编写整个函数要容易, 但是,仍然
Saiyaff Farouk

1
就像我说的那样,“这不是一个好方法……”,因为它与angular的设计范式不一致。由于这个原因,我不建议这样做。在性能方面-我认为这不会造成任何差异。但是,如果我是专家,那么我不应该遵循这种捷径。这只是完成工作的一种快速而肮脏的方法。:)告诉我您是否发现有关此的内容。
Gagandeep Singh

我是Angular的新手,并且让我的模式运行起来确实很不错。一旦我了解了如何(并且这个里程碑式的截止日期过去了),我就可以回来并正确地做它
VictorySaber

4

与Maxim Shoustin提供的版本相似的不同版本

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

我想将模式的模板放置在隐藏的位置,<div>并用一个范围变量来绑定内部html,这modal_html_template 主要是因为我认为将模板的html放置在a中<div>而不是更正确(在WebStorm / PyCharm中处理更舒适)。<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();
    }
  }
});

这些项目的链接不会出现在您的随便听者中-不幸的是,我仍然很新,希望确定原因。
2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.