angualrJS(mvc)指令嵌套使用的一些问题
angular的指令拥有一个独立作用域的概念、
一般定义指令的形式;
define(['app'],function(mianapp){
mainapp.directive("tlmsAolInfoAdd",[function(){
return {
templateUrl:'js/directive/...../tlmsAolInfo_add.html',
scope:{
tmlsaolinfo:'='
},
link:function(s,ele,attrs){
}
}
}]);
});
这里举例一个很迷惘的例子
使用指令的页面
aol.html
<div>
....
..........
<div>
<tmls-aol-info-add tmlsaolinfo="itemModel"></tmls-aol-info-add>
</div>
</div>
aol.js
......
$scope.itemModel={
AolNumber:'',
Name:'',
Abstract:'',
XsFiles:[],
XsFileIDs:''
};
...........
tlmsAolInfoAdd.js指令
define(['app'],function(mianapp){
mainapp.directive("tlmsAolInfoAdd",[function(){
return {
templateUrl:'js/directive/...../tlmsAolInfo_add.html',
scope:{
tmlsaolinfo:'='
},
link:function(s,ele,attrs){
}
}
}]);
});
tlmsAolInfoAdd.html
<div>
...........
.................
.........
<div attachment ng-model="tmlsaolinfo.Xfiles" view-array="tmlsaolinfo.XsFiles"></div> </div>
attachment.js
define(['app'],function(mianapp){
mainapp.directive("attachment",[function(){
return {
templateUrl:'js/directive/...../tlmsAolInfo_add.html',
replace:true,
transclude:true,
scope:{
ngModel:'=',
viewArray:'='
},
link:function(s,ele,attrs){
$scope.$watch("viewArry",function(newVal,oldVal){
if(newVal){
$scope.XsFiles = newVal;
var _arr =[];
angular.forEach($scope.XsFiles,function(){
_arr.push(i_item.XsFileID);
});
$scope.ngModel = _arr.join(',');
}
else{
$scope.XsFiles =[];
}
});
}
}
}]);
});
这里细细讲一下他的使用逻辑:
我的aol页面使用一个
tlmsAolInfoAdd指令,在这个指令中也使用了一个attachment指令,并且也分别建立了自己的独立作用域(为了指令的复用),使用了“=”的双向绑定
参数itemModel、tmlsaolinfo、与attachment指令ngModel,viewArray的访问互相打通,
//当attachment中的ngModel,viewArray的值变化,在aol.js中的itemMolde也能拿到最新的值,但是问题就是行不通。
将itemModel中的XsFiles,XsFileIDs的初始值传递给attachment,但是问题就是行不通。 最终的解决是:
define(['app'],function(mianapp){
mainapp.directive("tlmsAolInfoAdd",[function(){
return {
templateUrl:'js/directive/...../tlmsAolInfo_add.html',
scope:{
tmlsaolinfo:'='
},
link:function(s,ele,attrs){
s.newtmlsaolinfo = s.tmlsaolinfo;
}
}
}]);
});
页面上:
<div attachment ng-model="newtmlsaolinfo.Xfiles" view-array="newtmlsaolinfo.XsFiles"></div> </div>
这样就可以解决从aol.js将值传递给tlmsAolInfoAdd指令,进而传给 attachment,但是attachement中的值的改变却不能通知到aol.js,
然后进一步解决
define(['app'],function(mianapp){
mainapp.directive("tlmsAolInfoAdd",[function(){
return {
templateUrl:'js/directive/...../tlmsAolInfo_add.html',
scope:{
tmlsaolinfo:'='
},
link:function(s,ele,attrs){
s.newtmlsaolinfo = s.tmlsaolinfo;
s.XsFileIDs= s.newtmlsaolinfo.XsFileIDs;
s.XsFiles =s.newtmlsaolinfo.XsFiles;
s.$watch('XsFileIDs',function(newVal,oldVal){
if(newVal) s.tmlsaolinfo.XsFielIDs = newVal;
});
}
}
}]);
});
html
<div>
...........
.................
.........
<div attachment ng-model="Xfiles" view-array="XsFiles"></div> </div>
以上的问题可能涉及到指令的生命周期问题,link函数之后执行一次,数值的改变要监听其变换。
angualrJS(mvc)指令嵌套使用的一些问题的更多相关文章
- angular(mvc)指令的嵌套使用
关于指令嵌套的使用,取值问题. 原理类似于控制器中使用指令,父指令类似于控制器,子指令就类似于控制器中指令.通过传值方式‘=’,我们直接可以在父指令中获取数据 举一个例子: 有个指令parentDir ...
- AngularJS指令嵌套时link函数执行顺序的问题
今天研究指令嵌套时,发现子指令的link函数先于父指令的link函数执行. 这样和预想的顺序不一样. 也就是说,如果子指令的某个scope变量依赖于父指令传来的参数时,可能一直是undefinded比 ...
- angular2的ngfor ngif指令嵌套
angular2的ngfor ngif指令嵌套 ng2 结构指令不能直接嵌套使用,可使用<ng-container>标签来包裹指令 示例如下: <ul> <ng-cont ...
- --@angularJS--较复杂的指令嵌套demo——综合小实例:登陆界面
1.index.html: <!DOCTYPE HTML><html ng-app="app"><head> <title>c ...
- Spring MVC Ajax 嵌套表单数据的提交
概述 在一些场景里,某个大表单里常常嵌套着一个或若干个小逻辑块,比如以下表单里"设计预审"中包括了一个子模块表单"拟定款项". 在这种情况下该怎么去设计实体类以 ...
- ASP.NET MVC Layout 嵌套
模板页Layout.cshtml代码(路径"~/Views/Backstage/MachineMng/Layout.cshtml"): @{ ViewBag.Title = &qu ...
- 解开神秘面纱之“AngualrJS 中指令相关的嵌入作用域和模板作用域”
原文:https://www.airpair.com/angularjs/posts/transclusion-template-scope-in-angular-directives#r1 原标题: ...
- angular 实例笔记之嵌套指令间的传参
最近在项目中遇到了需要嵌套指令的情况,指令在嵌套后子指令必须获得父指令中的数据来进行判断,但是在写传参的时候遇到了坑,因此记录下来,防止以后遗忘,个人的肤浅理解,欢迎大家留言讨论 首先,关于direc ...
- AngularJs自定义指令--执行顺序 (原文:http://www.cnblogs.com/sagacite/p/4624227.html)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- UVA-11090 Going in Cycle!! (平均值最大回路)
题目大意:一个n个点,m条无向边的图,求出平均权值最小的回路. 题目分析:二分枚举平均值mid,只需判断是否存在平均值小于mid的回路,即判断是否有sum(wi)<mid*k (1≤i≤k),只 ...
- UVA-1611 Crane (构造)
题目大意:给一个1~n的序列,每次操作可以把长度为偶数的序列交换前一半和后一半的位置.求出将这个序列变成升序的步骤. 题目分析:构造求解. 代码如下: # include<iostream> ...
- 几款必备LINUX的命令行神器
Dstat & sar iostat, vmstat, ifstat 三合一的工具,用来查看系统性能(我在<性能调优攻略>中提到过那三个xxstat工具). 官方网站:http:/ ...
- 【Error】SSL InsecurePlatform error when using Requests package
使用requests时会出席SSL InsecurePlatform error when using Requests package的错误,一般情况下python2.7.10以下的环境会出现此错误 ...
- linux---进程,(rpm,yum)软件包
3) 为新加的硬盘分区,一个主分区大小为5G,剩余空间给扩展分区,在扩展分区上划分1个逻辑分区,大小为5G fdisk -l fdisk /dev/sdb p 查看 n 新建 p 主分区 ...
- session、cookie、viewstate
session的用法 定义:保存在服务器内存的数据,sesson 只应该应用在需要跨页面且与每个访问用户相关的变量和对象存储上,session在默认情况下20分钟就过期,在页面之中最好不要过多使用,因 ...
- CMDB Autoclient思路分析
1.start.py里的script.run():执行run函数--> 2.script.py run方法--> 3.判断模式MODE(Agent/SSHSALT)-->4.执行cl ...
- Datastage8.5导入导出DS作业例子
以下为Datastage8.5的命令行方式的导入和导出,直接登陆服务器执行如下命令即可.不是Datastage客户端的导入和导出,使用命令行方式的好处是:可以将该命令使用shell脚本进行调用导入和导 ...
- Draggable拖动
Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 EasyUI中Draggable(拖动)组件的使用方法,这个组件不依赖于其他组件. 1.加载方式 / ...
- Ubuntu12.04 中文输入法设置
1.ibus输入法 Ubuntu系统安装后已经自带了ibus输入法,在英语环境下默认不启动. 配置ibus自动启动可 以在ubuntu系统菜单上选择System(系统)--- Preferences( ...