如何创建弹出屏幕[关闭]答案

【问题标题】：how to create pop up screen [closed]如何创建弹出屏幕[关闭]
【发布时间】：2014-09-18 15:05:23
【问题描述】：

我从去年开始使用 JQM。我在 jqm Fiddle 中开发了一个弹出屏幕。我们可以在angular js中开发这种类型的弹出屏幕吗？这意味着单击按钮时打开一个弹出屏幕。里面有编辑字段和按钮？

$(function(){
  $('#openPopup').click(function(){
      $( "#testCaseId" ).popup( "open" );
  })
})

【问题讨论】：

有一百万条指令在执行此操作，并且已在许多帖子/问题中得到解答。查看 angular-ui 引导程序以了解初学者。
这里有问题可以帮助你stackoverflow.com/questions/15812203/…
已经使用 bootstrap 但没有找到弹窗
谷歌？ likeastore.github.io/ngDialog/#
谢谢......任何人都可以使用小提琴......

标签： javascript jquery angularjs twitter-bootstrap jquery-mobile

【解决方案1】：

angular-ui-bootstrap 是用 angular 重写的 bootstrap 端口...

您可以在 how to create modal popup 上查看此 plunker

了解如何在 angularjs 中创建其他引导组件结帐ui-bootstrap

var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });

【讨论】：

Harish 可以用 fiddle 还是 jsbin 为例
我在答案中提供了 plunker 链接
plunker 显示错误，请您提供小提琴
你好Plunker！是这样写的。。
签出new plunker

【解决方案2】：

利用bootstrap 创建您的模式弹出窗口相当简单：

模态指令

app.directive('modal', function () {
    return {
        restrict: 'A',
        scope: true,
        transclude: true,
        templateUrl: 'modalTemplate.html',
        link: function (scope, element, attr) {
            scope.id = attr.id;
            scope.title = attr.title;
            element.removeAttr('id');
        }
    }
})

HTML

<body ng-app="app" ng-controller="ctrl">
    <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>

    <div title="This is the modal title" id="myModal" modal>
        This is the modal content
    </div>
</body>

Demo Plunker

【讨论】：

pluker 显示错误你能用小提琴吗..
你好Plunker！写在里面
加载后显示 ..error in pluker..