作者:當紅冷萱儿_422 | 来源:互联网 | 2023-09-02 15:05
利用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")
})
推荐阅读
-
本文介绍了如何将公司内部的Gitlab系统接入单点登录服务,并提供了安装和配置的详细教程。通过使用oauth2协议,将原有的各子系统的独立登录统一迁移至单点登录。文章包括Gitlab的安装环境、版本号、编辑配置文件的步骤,并解决了在迁移过程中可能遇到的问题。 ...
[详细]
蜡笔小新 2023-12-10 14:38:53
-
本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断,区分默认命名空间和自定义命名空间,并采用不同的解析方式。其中,bean标签的解析最为复杂和重要。 ...
[详细]
蜡笔小新 2023-12-14 17:24:50
-
-
这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ...
[详细]
蜡笔小新 2023-12-14 16:19:10
-
蜡笔小新 2023-12-13 11:03:10
-
本文介绍了在CentOS/RHEL 7/6,Fedora 27/26/25上安装JAVA 9的详细步骤和方法。首先需要下载最新的Java SE Development Kit 9发行版,然后按照给出的Shell命令行方式进行安装。详细的步骤和方法请参考正文内容。 ...
[详细]
蜡笔小新 2023-12-13 09:26:47
-
IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ...
[详细]
蜡笔小新 2023-12-12 13:43:58
-
项目重构的Git地址:https:github.comrazerdpFriendCircletreemain-dev项目同步更新的文集:http:www.jianshu.comno ...
[详细]
蜡笔小新 2023-12-11 19:09:56
-
蜡笔小新 2023-12-11 13:17:11
-
1Lock与ReadWriteLock1.1LockpublicinterfaceLock{voidlock();voidlockInterruptibl ...
[详细]
蜡笔小新 2023-12-09 09:15:17
-
总结一下C中string的操作,来自〈CPrimer〉第四版。1.string对象的定义和初始化:strings1;空串strings2(s1);将s2初始 ...
[详细]
蜡笔小新 2023-12-09 09:05:48
-
本文介绍了利用ARMA模型对平稳非白噪声序列进行建模的步骤及代码实现。首先对观察值序列进行样本自相关系数和样本偏自相关系数的计算,然后根据这些系数的性质选择适当的ARMA模型进行拟合,并估计模型中的位置参数。接着进行模型的有效性检验,如果不通过则重新选择模型再拟合,如果通过则进行模型优化。最后利用拟合模型预测序列的未来走势。文章还介绍了绘制时序图、平稳性检验、白噪声检验、确定ARMA阶数和预测未来走势的代码实现。 ...
[详细]
蜡笔小新 2023-12-09 08:30:08
-
本文介绍了使用C++Builder实现获取USB优盘序列号的方法,包括相关的代码和说明。通过该方法,可以获取指定盘符的USB优盘序列号,并将其存放在缓冲中。该方法可以在Windows系统中有效地获取USB优盘序列号,并且适用于C++Builder开发环境。 ...
[详细]
蜡笔小新 2023-12-09 08:17:53
-
本文整理了Java中org.apache.solr.common.SolrDocument.setField()方法的一些代码示例,展示了SolrDocum ...
[详细]
蜡笔小新 2023-12-09 06:54:05
-
蜡笔小新 2023-10-18 00:03:19
-
Hi.Imtryingtogetsummarizefrom00:00otfirstdayofthismonthametric, ...
[详细]
蜡笔小新 2023-10-17 20:11:29
-