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 ...
随机推荐
- Metasploit没有db_autopwn命令的解决办法
将附件db_autopwn.rp 拷贝到/opt/framework3/msf3/plugins/PS:db_autopwn.rp 下载地址:http://dl.vmall.com/c04w8czlc ...
- ubuntu12.04+openni+nit+SensorKinect环境搭建
一.安装openni 1.下载openni OpenNI-Bin-Dev-Linux-x64-v1.5.4.0.tar.bz2 2.cd ~; mkdir kinec ...
- flume 启动,停止,重启脚本
#!/bin/bash #echo "begin start flume..." #flume的安装根目录(根据自己情况,修改为自己的安装目录) path=/sysware/apa ...
- idea git tag 管理
项目release 之后一般都会打一个tag 做记录.本人使用idea管理tag的时候,遇到的问题做一些记录. 1:idea 创建tag idea 创建tag ,我们可以右键项目,然后按照下图操作创建 ...
- LeetCode OJ:Palindrome Partitioning(回文排列)
Given a string s, partition s such that every substring of the partition is a palindrome. Return all ...
- js 滚到页面顶部
一.滚到顶部,且滚动中,用户滚动鼠标无效 <style> .div1, .div2, .div3, .div4 { height: 400px; width: 400px; } .div1 ...
- CocoaPods Mac App的安装和使用
CocoaPods桌面应用版下载地址:https://cocoapods.org/app打开应用会提示你是否安装命令行工具,选择install就也可以在命令行使用Pod了.省去了上面的步骤们,方便快捷 ...
- GreenPlum的Primary和Mirro切换恢复
gp节点出现了acting as primary change tracking错误,判断是节点primary和mirror发生了切换 1.没有配置gp的日志,无法获取为什么切换了,待会儿看看默认日志 ...
- echarts-detail--柱状图
一:柱形图 1.Echarts-柱状图柱图宽度设置-----只需要设置series中的坐标系属性barWidth就可以 /** * 堆积柱状图 * @param xaxisdata x轴:标签(数组) ...
- Freemaker的java.beans.IntrospectionException: type mismatch between read and write methods
引言:freemaker在特定的spring以及jdk下的问题解决路径. 环境描述 spring 3.1.1, jdk1.8u80, freemake 2.3.19 错误信息描述: 严重: Excep ...