angular 使用dialog的经验-白红宇

angular 使用dialog的经验

阅读量：5051 次

发布时间：2019-06-12

本文共 2069 字，大约阅读时间需要 6 分钟。

利用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>

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

　　　　})

转载于:https://www.cnblogs.com/FineDay/p/7291099.html

你可能感兴趣的文章