angular 使用dialog的经验
利用angular在近期的工作中使用了dialog的方式，总结下经验
由于dialog显示的内容不同，需要用到angular 的ng-include加载不同的文件
1 dialog利用指令的方式
app.directive('dialog', function() {
return {
restrict: 'AE',
scope: {
loadData: '='
},
template: '<div ng-show="loadData.isShow" class="dialog-main">' +
‘<div class="dialog-box">' +
'<div class="dialog-content"><i class="close-button" ng-click="closeDialog()"><img src="image/close.png" /></i>' +
'<div ng-include="loadData.template.url"></div>' + // 注意下利用ng-inclue加载不同的页面文件
'</div>’ +
’</div>' ,
replace: true,
link: function (scope, element, attr) {
scope.closeDialog = function(){
scope.loadData.isShow = false;
}
}
}
});
2 使用dialog指令的方式
因为需要的dialog页面不少，所以考虑dialog组件直接放到$rootScope环境中，
<div ng-app="zswq">
<dialog load-data="dialog_data"></dialog>
<div app-header-area></div>
<div class="content flex" >
</div>
3 弹出dialog的方式
可点击按钮弹出，利用ng-click="dialog_data.isShow=!data.isShow; dialog_data.data={id:0,unitName:''};dialog_data.template.url='/view/template/content/manage/employee/add_employee.html' ”
好的方式是写在逻辑中，ng-click="getDialog()" ,然后在getDialog函数中 用 dialog_data.isShow=!data.isShow; dialog_data.data={id:0,unitName:''};dialog_data.template.url='/view/template/content/manage/employee/add_employee.html'
4 注意刷新的问题
例如公司编辑页面，公司不同，就需要传递的值就不同，放到 dialog_data.data对象中（看第3条），通过利用 dialog_data.data取传递。
但是注意刷新的问题，编辑不同的公司信息，需要弹出的是一个dialog，但是因为dialog中加载的是没有改变的静态页面，不存在重新加载，页面的数据显示的是原来的（虽然已经更改了dialog_data.data对象），所以就要考虑在弹出dialog的事件中触发下更新的函数
因为dialog处于$rootScope环境，所以$rootScope中$watch监听dialog_data.data对象的改变，如果改变，就向下广播$broadcast一个函数dialogWinNeedReload，位于dialog的那个页面接收广播，更改绑定数据，重新请求
$scope.$on("dialogWinReload",function(){
$scope.queryCompanyData = {
"cId":$rootScope.dialog_data.data.cid,
"token":$cookies.get("token")
}
$scope.initCompany();
});
$rootScope.$watch("dialog_data.data",function(){
$rootScope.$broadcast("dialogWinReload")
})