angularjs使用lhgdialog做对话框控件

最新推荐文章于 2019-09-12 11:15:29 发布

最新推荐文章于 2019-09-12 11:15:29 发布 · 121 阅读

文章标签：

#web #angularjs

angularjs 同时被 2 个专栏收录

2 篇文章

订阅专栏

web

2 篇文章

订阅专栏

本文介绍如何在AngularJS项目中使用jQuery插件lhgdialog实现对话框功能。通过自定义指令结合$compile服务，实现了动态DOM元素的双向绑定，并展示了具体的实现代码及用法。

关于这条“军规”，我们就不要浪费口舌了，angular-strap等很多库扩展的做法，都没有一下子舍弃jquery的生态圈

Don't even use jQuery. Don't even include it

我这篇blog主要是以一个示例呼应下另外一些朋友的blog——angularjs与其他类库的协作

lhgdialog是一个很优秀的对话框的js库，提供jquery插件形式，我们项目上用起来很方便。如果用angular纯模型控制的方式去做dialog，需要大量的css控制属性，其中drop/resize等比起现有的jquery都算从头重写，当然费时费力，所以我们还是采取结合jquery实现。

因为open一个dialog，底层是clone一段dom到body下，用定位去实现的，对于这种动态创建的dom，angular本身在第一次bootstrap编译时候是没有双向绑定特性的，这要借助强大的$compile这个服务

为了在应用层（controller/model）的代码少点jquery的侵入，所以做成了指令（用指令还会引发一些其他问题，在此不表）——

md.directive('uiDialog2', ['$parse', '$compile', 'ng.config', 'uiLog', 'safeApply', function($parse, $compile, conf, log, safeApply){
'use strict';
return {
	restrict: 'A',
	link: function(scope, el, attrs){
		var opts = scope.$eval(attrs.uiDialog2) || {};
		log.i('Compile dialog2 ui : ');
		log.i(opts);

		if(!opts.showModel || !opts.dialogId){
			log.w('No show model and dialog id given!');
			return;
		}

		// lhgdialog properties
		var props = {};
		if(ag.isObject(conf.dialog2)){
			ag.extend(props, conf.dialog2);
		}
		props.id = opts.dialogId;
		props.content = el.html();
		props.init = function(){
			// in watch
			$compile($('.ui_content:first'))(scope);
		};
		props.close = function(){
			// use close in dialog toolbar will execute twice
			// use button in dialog user defined will execute once which trigger by watch list
			var getter = $parse(opts.showModel);
			var isShow = getter(scope);
			if(isShow){
				var setter = getter.assign;
				// trigger watch again
				safeApply(scope, function(){
					setter(scope, false);
				});
			}
		};

		// over write
		if(angular.isDefined(opts.lock))
			props.lock = opts.lock;
		if(angular.isDefined(opts.drag))
			props.drag = opts.drag;
		if(angular.isDefined(opts.fixed))
			props.fixed = opts.fixed;
		if(angular.isDefined(opts.resize))
			props.resize = opts.resize;
		if(opts.width)
			props.width = opts.width;
		if(opts.height)
			props.height = opts.height;
		if(opts.left)
			props.left = opts.left;
		if(opts.top)
			props.top = opts.top;

		scope.$watch(opts.showModel, function(val){
			// show
			if(val){
				$.dialog(props);
			}else{
				// hide
				var target = $.dialog.list[opts.dialogId];
				if(target)
					target.close();
			}
		});
	}
};
}]);

html/js里用法就很简单

	var myModule = angular.module('myModule', ['ng.ui']);
	myModule.controller('MyCtrl', function($scope){
		$scope.detail = {name: 'kerry'};
		$scope.isDialogShow = false;

		$scope.open = function(){
			$scope.detail = {name: ''};
			$scope.isDialogShow = true;
		};
		$scope.close = function(){
			$scope.isDialogShow = false;
		};
	});

	window.angular.bootstrap(document, ['myModule']);

html代码如下

<body ng-controller="MyCtrl">
<div class="container_12">
	<button class="btn btn-blue" ng-click="open()">Open</button>
	<br />
	{{isDialogShow}}
</div><!-- /.container_12 -->

<div ui-dialog2="{showModel: 'isDialogShow', dialogId: 'dialogA', lock: true}" title="DIALOG" 
	style="display: none;">
	<form name="detailForm">
	<input ng-model="detail.name" ui-valid="r int" />
	</form>
	<br />
	{{detailForm.$valid}}
	<br />
	<button class="btn btn-red" ng-click="close()">Close</button>
</div>

</body>

当然，前提是你html里要引入jquery/lhgdialog的js