关于这条“军规”，我们就不要浪费口舌了，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
相关推荐
摘要:脚本资源,Ajax/JavaScript,lhgdialog,对话框插件 lhgdialog Js对话框插件3.5.1,不含示例，3.5.1 一款功能强大的迷你且高效的弹出窗口组件，基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,...
《Lhgdialog对话框使用总结（上）》 在网页开发中，对话框是一个不可或缺的交互元素，它用于向用户展示重要信息或者进行确认操作。Lhgdialog是一款基于JavaScript的弹出对话框插件，其设计简洁，功能强大，且高度可...
lhgdialog是一款由李辉刚开发的弹出窗口控件，用于在网页中创建具有定制化功能的对话框。该控件提供了丰富的配置选项和多种内容展现方式，适合于多种场景下的网页交互设计。 首先，了解lhgdialog的文件结构至关重要...
lhgdialog超强弹窗控件，支持遮罩，缩放、拖动，随滚动条滚动，丰富接口调用 可以外调页面，也可以显示html内容 我自己扩展如下： http://www.px915.com/lhgdialog/_demo.html 1、改变了弹窗的样式（自认为喜欢...
**lhgDialog对话框组件详解** lhgDialog是一款在JavaScript世界中广泛应用的对话框组件，以其高度可定制性、良好的跨浏览器兼容性和丰富的功能而受到开发者们的青睐。它旨在为网页应用提供美观、高效的对话框解决...
《lhgdialog弹出窗口控件详解》 lhgdialog是一款优秀的JavaScript弹出窗口插件，它以其简洁的代码、丰富的功能以及高度可定制的皮肤，深受开发者喜爱。这款插件能够帮助网页开发者轻松实现各种复杂的对话框效果，如...
Lhgdialog是一个在ASP.NET环境下广泛使用的JavaScript插件，它允许开发者在网页上实现弹出对话框的功能，用于显示信息、警告、确认或者进行更复杂的操作。 Lhgdialog控件的主要特点和优势包括： 1. **易用性**：...
**lhgdialog弹出窗口框架使用说明** lhgdialog是一个专为前端开发者设计的轻量级、高效能的弹出窗口组件。它以其强大的功能和灵活性，在网页应用中被广泛使用，尤其适用于需要创建各种复杂对话框场景。本文将详细...
《深入解析LHGDialog：一个纯JavaScript实现的优雅对话框组件》 在Web开发中，对话框组件是不可或缺的一部分，它用于向用户展示警告、询问、确认等交互信息。LHGDialog是一个基于纯JavaScript实现的对话框组件，以...
从提供的压缩包文件名来看，"lhgdialog_jb51.net.rar"可能包含了lhgDialog的基础文件，而"lhgdialog跨框架iframe弹出层.rar"则可能包含了关于跨iframe使用对话框的示例代码或扩展功能。在实际操作中，你需要解压这些...
使用LHGDialog，开发者可以轻松创建具有弹出、漂浮、模态或非模态特性的对话框，以满足不同场景的需求。 其次，日历控件在许多需要日期选择的场景下非常实用，例如预订系统、日程管理等。本资料中提到了两类日历...
本文将深入探讨lhgdialog的使用方法，包括如何在框架中集成、关闭后回刷父窗口的功能以及各种应用场景和皮肤选择。 首先，我们来看如何在项目中引入并使用lhgdialog。通常，你需要通过CDN或者本地引入js文件，例如`...
下面是一些使用lhgdialog创建不同对话框的简单示例： ```python # 显示消息框 lhgdialog.msgbox(message="这是一个消息框", title="lhgdialog 示例") # 获取用户输入 user_input = lhgdialog.inputbox(prompt="请...
总的来说，【lhgDialog示例】为初学者提供了一个直观的学习平台，通过这个例子，你可以了解到如何使用lhgDialog来创建各种对话框，并掌握其基本的配置和回调机制。在实际项目中，可以根据需要进一步探索和利用...
`lhgdialog`是一个优秀的JavaScript库，专门用于创建模态对话框，它提供了丰富的自定义选项和美观的视觉效果，相比C#自带的对话框，`lhgdialog`在用户体验和设计感上更为出色。 `lhgdialog`的核心功能包括： 1. **...
《lhgdialog v4.2：一款强大的对话框组件详解》 lhgdialog是一款广泛应用于JavaScript和HTML5开发中的对话框组件，其最新版本v4.2为开发者提供了丰富的功能和便捷的API接口，旨在提升网页应用的用户体验。在这款...
而lhgDialog是一款基于jQuery的弹出对话框插件，它为网页提供了丰富的对话框效果，使得用户交互更加友好。本文将深入探讨lhgDialog-4.2.0版本的特性和应用。 lhgDialog的核心功能在于提供灵活的对话框解决方案，它...
这款工具的最新版本在前代的基础上进行了优化和升级，为开发者提供了更高效、更稳定、更美观的对话框解决方案，尤其对于那些使用各种框架进行开发的工程师们来说，lhgdialog3.2.4无疑是一把得力的助手。 lhgdialog...
9. **定制化**：为了满足不同应用的需求，lhgdialog4.0.0可能允许高度自定义对话框的外观和行为，例如调整对话框大小、设置背景颜色、添加自定义控件等。 10. **性能优化**：作为4.0.0版本，它可能在性能方面进行了...
4. **lhgdialog API**：lhgdialog提供了丰富的API供开发者调用，包括初始化对话框、设置参数、显示、关闭、回调函数等。例如，`lhgdialog(options)`用于创建一个对话框，`options`对象可以包含标题、内容、宽度、...