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 ...
随机推荐
- JavaScript---循环与闭包
循环与闭包 先看一个demo <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- Sql sever 事务
SQL事务 一.事务概念 事务是一种机制.是一种操作序列,它包含了一组数据库操作命令,这组命令要么全部执行,要么全部不执行.因此事务是一个不可分割的工作逻辑单元.在数据库系统上执行并发操作时事务 ...
- 联想北研实习生面试-嵌入式Linux研发工程师
8月中旬暑假去联想北研参加了实习生面试,面试职位是嵌入式Linux研发工程师.投完简历第二天,主管回复我邮件,意思是说随时来面试,到北研时候给他打个电话就行.于是我回复条短信表示感谢,并约好时间第二天 ...
- redis高级应用特征
Redis高级应用特性 1.安全性 2.主从复制 3.事务处理 4.持久化机制 5.发布订阅消息 6.虚拟内存的使用 安全性 设置客户端连接后进行任何其他指定前需要使用的密码. 警告:因为redis速 ...
- eclipse ndk 配置和简单开发demo
记录下以备忘: android开发的各种资源国内镜像 http://www.androiddevtools.cn/ 前端时间尝鲜用android stuido1.5开发了个android的小项目,发现 ...
- Java基础学习-内部类
/*内部类: 成员内部类 局部内部类 匿名内部类*/ package insideclass; /*成员内部类: * 在类的成员位置,和成员变量,成员方法的位置是一样的. * 内部类可以直接访问为外部 ...
- three.js入门——先跑个旋转的正方体
WebGl中文网看了几篇教程,又百度了几篇文章,顿时感觉手痒,打开编辑器,写个demo玩玩. demo是写在vue项目中的,所以首先: npm install three --save; npm in ...
- Python报错IOError: [Errno 22] invalid mode ('r') or filename
IOError: [Errno 22] invalid mode ('r') or filename: 这种错误的出现是在使用built-in函数file()或者open()的时候. 或者是因为文件的 ...
- BZOJ3141 Hnoi2013 游走 【概率DP】【高斯消元】*
BZOJ3141 Hnoi2013 Description 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点 ...
- (C#)if (this == null)?你在逗我,this 怎么可能为 null!用 IL 编译和反编译看穿一切
if (this == null) Console.WriteLine("this is null"); 这句话一写,大家一定觉得荒谬,然而 if 内代码的执行却是可能的!本文讲介 ...