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 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
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17