angularjs使用lhgdialog做对话框控件

关于这条“军规”，我们就不要浪费口舌了，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 propertiesvar 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 listvar getter = $parse(opts.showModel);var isShow = getter(scope);if(isShow){var setter = getter.assign;// trigger watch againsafeApply(scope, function(){setter(scope, false);});}};// over writeif(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){// showif(val){$.dialog(props);}else{// hidevar 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

angularjs使用lhgdialog做对话框控件相关推荐

Web开发中的弹出对话框控件介绍
Web开发中,目前由于Jquery的大行其道,因此很多弹出对话框,都用到了Jquery技术,反而原始的弹出对话框的方式较为少用了.不过基于JQuery的方式实现对话框窗口弹出,也有很多控件可以利用,由 ...
MFC中，如何获得对话框控件相对于父窗口（对话框窗口）的位置
在MFC中,如何获得对话框控件相对于父窗口(对话框窗口)的位置: CRect r; pWnd->GetWindowRect(&r); 这样获得的r是控件相对于屏幕的坐标,然后用Scre ...
Chapter 7. 对话框控件
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
MFC对话框控件成员变量编程熟悉 - 开发一个简单天线长度计算器
新建一个对话框工程:VC6:VC2010类似:版本不同略有些差别: 新建完如下:对话框默认有三个控件,自己添加的: 右击确定按钮,建立类向导:进入类向导: Class name下拉选中对话框类:类 ...
ATL和ActiveX做的控件.dll和.ocx最主要的区别（摘录）
楼主是不是说用ATL做的控件和用MFC ActiveX wizard的控件有什么区别吧依存的动态库不一样, 一个是ATL.DLL吧, 一个是MFC42.DLL. ATL开发的控件代码少,轻便,便于网 ...
目录浏览器对话框控件 c# 1614822374
目录浏览器对话框控件 c# 1614822374 引入控件效果显示控件效果显示路径效果
打开文件对话框控件的演示 c# 1614993940
打开文件对话框控件的演示 c# 1614993940 引入控件效果显示控件代码效果默认事件文件被选中,点了打开后,触发获取绝对路径代码效果获取文件名代码效果过漏获取指定格式的 ...
android 33 对话框控件
对话框控件:最多3个按钮. mainActivity.java package com.sxt.day05_09;import android.app.Activity; import android ...
asp.net服务器端对话框控件的简单实现（附源码）
最近项目要用到一个对话框控件,正好自己从前写了一个,拿了出来,看着自己从前写的东西,唏嘘不已. 下面是一个精简版的源代码,release在这里,谁喜欢,自己编译成dll吧. http://files. ...

angularjs使用lhgdialog做对话框控件

angularjs使用lhgdialog做对话框控件相关推荐

最新文章

热门文章