anglejs – AngularUI模态可拖动和可调整大小

发布时间：2020-12-17 07:46:04 所属栏目：安全来源：网络整理

导读：我有一个包含在指令中的angularUi模态窗口： HTML： !doctype htmlhtml ng-app="plunker" head script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"/script script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpl

我有一个包含在指令中的angularUi模态窗口：

HTML：

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="main.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div my-modal="{ data: 'test2'}">test2</div>

  </body>
</html>

JavaScript的：

angular.module('plunker',['ui.bootstrap','myModal']);

angular.module("myModal",[]).directive("myModal",function ($modal) {
    "use strict";
    return {
      template: '<div ng-click="clickMe(rowData)" ng-transclude></div>',replace: true,transclude: true,scope: {
        rowData: '&myModal' 
      },link: function (scope,element,attrs) {
        scope.clickMe = function () {
            $modal.open({
            template: "<div>Created By:" + scope.rowData().data + "</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>",controller: function ($scope,$modalInstance) {
                $scope.ok = function () {
                    $modalInstance.close({ test: "test"});
                };

                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                };
            }
        });
        }
      }
    };
});

广告牌：http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview

我想使模态拖动和调整大小.我通过互联网进行搜索,并且能够找到实现draggable的以下解决方案：

http://plnkr.co/edit/jHS4SJ?p=preview

这是重要的部分：

app.directive('dragable',function(){   
  return {
    restrict: 'A',link : function(scope,elem,attr){
      $(elem).draggable();
    }
  }  
});

但是没有能够使我的例子成为可能.有人可以帮我弄这个吗？我不知道是否可以使用jqueryui模态包装在一个指令(而不是引导)？我不是很好的javascript,并将非常greatefull任何工作的例子与两个选项.谢谢

编辑：

我添加了jqueryui参考,并通过添加以下行来设置模态拖动：

$(".modal-dialog").draggable();

问题是我不知道什么时候添加这一行.在这个时候,我已经在cancel方法中添加了这个(只是为了使它工作)：

$scope.cancel = function(){
$(“模式 – 对话”)可拖动();
};

所以当模态被打开时,我需要调用cancel,只有模态是可拖动的.如果我之前提到的.modal对话框不存在.建议？

更新的plunker：
http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview

我错过了一些小小的东西,可以提供工作示例吗？

如果您不想修改内置模板,可以编写一个指向modalWindow的指令：

.directive('modalWindow',function(){
    return {
      restrict: 'EA',link: function(scope,element) {
        element.draggable();
      }
    }  
  });

请注意,您必须在AngularJS脚本之前加载jQuery和jQuery UI.

注意：还要记住,更新版本的Angular UI引导程序已经以“uib”为前缀,所以“modalWindow”成为“uibModalWindow”,感谢@valepu

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!