Question

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

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

Answer 1

angular-ui-bootstrap是以角度重写的bootstrap端口...

你可以在how to create modal popup

上查看这个plunker

了解如何在angularjs checkout 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());
    });

Answer 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

如何创建弹出屏幕

2 个答案: