angularJS ng-repeat中的directive 动态加载template
有个需求,想实现一个html组件,传入不同的typeId,渲染出不同的表单元素。
<div ng-repeat="field in vm.data">
<magic-field type="{{field.fieldTypeId}}"></magic-field>
</div>
如当属性type的值为1,输出input元素,type=2输出textarea
也就是说我们要在directive中根据属性获得不同的template。
刚开始我的设想是利用 templateUrl 可以接收一个方法:
.directive('magicField', function(){
return {
templateUrl: function(elem, attr){
if(attr.type == 1) {
template = 'tpl/mgfield/input.html'
}
if(attr.type == 2) {
template = 'tpl/mgfield/textarea.html'
}
return template;
},
}
})
但是此路不通。
如果属性值 type=1 是明确的可以编译成功,但是我们的directive是放到了ng-repeat中,属性值不固定,{{field.fieldTypeId}}没有编译。
打印attr,type值为未编译的 {{field.fieldTypeId}}。
原因是执行顺序问题,是先加载template内容然后执行link。
解决办法:使用ng-include
完整代码:
angular.module("app", [])
.controller("DemoCtrl", ['$scope', function($scope){
var vm = this;
vm.data = [
{
fieldTypeId: 1,
title: 'first name'
},
{
fieldTypeId: 2,
title: 'this is text area'
}
]
}])
.directive('magicField', function(){
return {
template: '<div ng-include="getContentUrl()"></div>',
replace: true,
//transclude: true,
link: function($scope, $element, $attr){
$scope.getContentUrl = function() {
if($attr.type == 1) {
template = 'tpl/mgfield/input.html'
}
if($attr.type == 2) {
template = 'tpl/mgfield/textarea.html'
}
return template;
}
}
}
})
angularJS ng-repeat中的directive 动态加载template的更多相关文章
- html中的图像动态加载问题
首先要说明下文档加载完成是什么概念 一个页面http请求访问时,浏览器会将它的html文件内容请求到本地解析,从窗口打开时开始解析这个document,页面初始的html结构和里面的文字等内容加载完成 ...
- 非常郁闷的 .NET中程序集的动态加载
记载这篇文章的原因是我自己遇到了动态加载程序集的问题,而困扰了一天之久. 最终看到了这篇博客:http://www.cnblogs.com/brucebi/archive/2013/05/22/Ass ...
- 在Unity3D的网络游戏中实现资源动态加载
用Unity3D制作基于web的网络游戏,不可避免的会用到一个技术-资源动态加载.比如想加载一个大场景的资源,不应该在游戏的开始让用户长时间等待全部资源的加载完毕.应该优先加载用户附近的场景资源,在游 ...
- Java之——Web项目中DLL文件动态加载方法
本文转自:https://blog.csdn.net/l1028386804/article/details/53903557 在Java Web项目中,我们经常会用到通过JNI调用dll动态库文件来 ...
- (转)在Unity3D的网络游戏中实现资源动态加载
原文:http://zijan.iteye.com/blog/911102 用Unity3D制作基于web的网络游戏,不可避免的会用到一个技术-资源动态加载.比如想加载一个大场景的资源,不应该在游戏的 ...
- angularJS指令动态加载template
angularJS提供了自定义指令的功能,指令可以定义自己的模板控制器,这个就类似于现在框架的组件,一个指令一般对应一个模板, templateUrl: 'templates/exportTmp.ht ...
- java 中能否使用 动态加载的类(Class.forName) 来做类型转换?
今天同事提出了一个问题: 将对象a 转化为类型b,b 的classpath 是在配置文件中配置的,需要在运行中使用Class.forName 动态load进来,因为之前从来没有想过类似的问题,所以懵掉 ...
- layui中radio的动态加载(进入修改页面时,设置radio)
动态设置 radio 的值让它处于选中状态 效果图 : 前端代码: <div class="layui-form-item"> <label class=& ...
- Android 图片从网页中获取并动态加载到listview中
实现功能: 效果图: 代码:这里
随机推荐
- OS开发小记:iOS富文本框架DTCoreText在UITableView上的使用
要在页面中显示自己的布局,比如文字的字体和颜色.图文并排的样式,我们要用iOS SDK的原生UI在app本地搭建,如果一个页面需要在服务器端获取数据的话,我们也要在本地搭建好固定的布局,解析服务器传回 ...
- python各种模块的使用
Pexpect模块:http://www.ibm.com/developerworks/cn/linux/l-cn-pexpect1/ ConfigParser模块:http://blog.china ...
- VIM之打开、保存文件
如何使用命令 在Normal mode下,输入':'字符,在GVIM界面左下可以看到如图所示的界面: 这时候可以键入命令,输入完后按下键盘上的Enter键即可执行命令. 打开文件 使用命令:e [文件 ...
- Hadoop 解除 NameNode is in safe mode
运行Hadoop程序时,有时候会报以下错误: org.apache.hadoop.dfs.SafeModeException: Cannot delete /user/hadoop/input. Na ...
- spring cloud各个模块作用
Eureka Client:负责将这个服务的信息注册到Eureka Server中.Eureka Server:注册中心,里面有一个注册表,保存了各个服务所在的机器和端口号.ribbon:负载均衡,获 ...
- 我的QT5学习之路(四)——信号槽
一.前言 前面说了Qt最基本的实例创建.控件以及工具集的介绍,相当于对于Qt有了一个初次的认识,这次我们开始认识Qt信号通信的重点之一——信号槽. 二.信号槽 信号槽是 Qt 框架引以为豪的机制之一. ...
- Vue04——vue自定义事件、Router、Vue-cli、发布上线
一.Vue的自定义事件 点击任何一个按钮,按钮本身计数累加,但是每点击三个按钮中的一个,totalCounter 都要累加. <body> <div id="app&quo ...
- 使用XWAF框架(3)——下载文件
XWAF提供了HttpFileDownloader类用于简化用户下载文件的编码.该类提供了重载方法“downloadFile(String filePath, String fName)”实现下载.程 ...
- 一个简单的Linux启动jar包的shell脚本
背景: 项目设备端需要运行jar包程序与服务端进行socket连接并发送数据,每次启动进程时,都需要在Linux终端输入启动jar包的命令,比较繁琐,随之尝试将启动jar包的命令写入shell脚本文件 ...
- node创建服务器
//引入核心模块 const http = require('http'); //创建服务器 http.createServer((req,res)=>{ }).listen(3000); // ...