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="data: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")
　　　　})