热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

angular使用dialog的经验

利用angular在近期的工作中使用了dialog的方式,总结下经验由于dialog显示的内容不同,需要用到angular的ng-include加载不同的文件1dialog利用指令的方式app.d

利用angular在近期的工作中使用了dialog的方式,总结下经验

由于dialog显示的内容不同,需要用到angular 的ng-include加载不同的文件
1 dialog利用指令的方式

app.directive('dialog', function() {
  return {
    restrict: 'AE',
    scope: {
      loadData: '='
    },
    template: '

' +
          ‘
' +
            '
' +
            '
' +   // 注意下利用ng-inclue加载不同的页面文件

          '
’ +

        ’
' ,

    replace: true,
    link: function (scope, element, attr) {
      scope.closeDialog = function(){
        scope.loadData.isShow = false;
      }
    }
  }
});

2 使用dialog指令的方式

因为需要的dialog页面不少,所以考虑dialog组件直接放到$rootScope环境中,


  
  

  

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")
    })


推荐阅读
author-avatar
當紅冷萱儿_422
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有