使用JavaScript在AngularJS引导UI调用模式窗口(Invoking modal wi

使用中提到的例子在这里，我怎么能使用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);  
}

这可以在行动中可以看出在这个普拉克： http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview

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

Answer 2:

为了使自举3角UI $模式的工作，你需要覆盖的样式

.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引导网站尚未更新了最新的文档。大约3个月前pkozlowski-开源创作的变化分离出$模式从$对话框提交低于：

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

在这种承诺，他增加了$模式，它可以在下面找到新的文件：

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:

类似于马克西姆Shoustin提供了一个不同版本

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

我想把它放到模态的模板在一个隐藏<div>并绑定称为范围变量内HTML modal_html_template主要是因为我觉得它更正确的（和更舒适的WebStorm / PyCharm处理）到模板的HTML里面放上一个<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();
    }
  }
});

文章来源: Invoking modal window in AngularJS Bootstrap UI using JavaScript