angularjs怎么编写一个公共的弹出层插件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs怎么编写一个公共的弹出层插件相关的知识，希望对你有一定的参考价值。
参考技术A恰好写过。
ng的组件分为两种形式，一种是用directive封装的custom element形式的component，比如Button、Tooltip这种；另外一种则是以Service形式封装成一个单例的object由angular的IoC注入到controller中，比如notification、或者你需要的modal。
首先要为modal服务设计API，比如modal.open modal.close, 然后要为弹出的modal设计遮罩层，并且确定当同时有多个modal出现在页面上时，遮罩层唯一。
其次，出于ng的特殊性，每次open一个新modal时，都需要利用ng内置的$compile服务对modal内的模板进行编译，并且为了支持controllerAs的关键词，这部分连接需要手动在服务中处理(具体怎么处理百度一下吧，很容易)
以下是我当初设计时写的一些参数，或许你可以参照。
API:.open(options) => Modal Object Instance
options ::=
template: String | dom<class|Id>,
className: String,
scope: AngularScope,
hooks:
onOpen: Function,
onClose: Function
,
controller:String,
controllerAs:String,
title: String
.closeAll
.close(id)
id ::= Number
额外的，这里有一个简单的实现，供你参考https://github.com/btford/angular-modal/blob/master/modal.js
参考技术B 1、将弹出层内容写在模版html里面2、编写指令，调用模版、控制器
3、调用指令，生成弹窗。 参考技术C 下面是AngularUI上的例子，有几点需要注意的地方
不要忘了引用bootstrap.css和ui.bootstrapmodule
不要忘了template
<html ng-app="ui.bootstrap.demo">
<head>
<script src="angular.js"></script>
<script src="ui-bootstrap-tpls-0.12.1.min.js"></script>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">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>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="selected">Selection from a modal: selected </div>
</div>
</body>
<script>
angular.module('ui.bootstrap.demo',['ui.bootstrap'])
.controller('ModalDemoCtrl', function($scope, $modal, $log)
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function(size)
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());
);
;
)
.controller('ModalInstanceCtrl', function($scope, $modalInstance, items)
$scope.items = items;
$scope.selected =
item: $scope.items[0]
;
$scope.ok = function()
$modalInstance.close($scope.selected.item);
;
$scope.cancel = function()
$modalInstance.dismiss('cancel');
;
);
</script>
</html>
以上是关于angularjs怎么编写一个公共的弹出层插件的主要内容，如果未能解决你的问题，请参考以下文章