有个需求,想实现一个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的更多相关文章

  1. html中的图像动态加载问题

    首先要说明下文档加载完成是什么概念 一个页面http请求访问时,浏览器会将它的html文件内容请求到本地解析,从窗口打开时开始解析这个document,页面初始的html结构和里面的文字等内容加载完成 ...

  2. 非常郁闷的 .NET中程序集的动态加载

    记载这篇文章的原因是我自己遇到了动态加载程序集的问题,而困扰了一天之久. 最终看到了这篇博客:http://www.cnblogs.com/brucebi/archive/2013/05/22/Ass ...

  3. 在Unity3D的网络游戏中实现资源动态加载

    用Unity3D制作基于web的网络游戏,不可避免的会用到一个技术-资源动态加载.比如想加载一个大场景的资源,不应该在游戏的开始让用户长时间等待全部资源的加载完毕.应该优先加载用户附近的场景资源,在游 ...

  4. Java之——Web项目中DLL文件动态加载方法

    本文转自:https://blog.csdn.net/l1028386804/article/details/53903557 在Java Web项目中,我们经常会用到通过JNI调用dll动态库文件来 ...

  5. (转)在Unity3D的网络游戏中实现资源动态加载

    原文:http://zijan.iteye.com/blog/911102 用Unity3D制作基于web的网络游戏,不可避免的会用到一个技术-资源动态加载.比如想加载一个大场景的资源,不应该在游戏的 ...

  6. angularJS指令动态加载template

    angularJS提供了自定义指令的功能,指令可以定义自己的模板控制器,这个就类似于现在框架的组件,一个指令一般对应一个模板, templateUrl: 'templates/exportTmp.ht ...

  7. java 中能否使用 动态加载的类(Class.forName) 来做类型转换?

    今天同事提出了一个问题: 将对象a 转化为类型b,b 的classpath 是在配置文件中配置的,需要在运行中使用Class.forName 动态load进来,因为之前从来没有想过类似的问题,所以懵掉 ...

  8. layui中radio的动态加载(进入修改页面时,设置radio)

    动态设置   radio  的值让它处于选中状态 效果图 : 前端代码: <div class="layui-form-item"> <label class=& ...

  9. Android 图片从网页中获取并动态加载到listview中

    实现功能: 效果图: 代码:这里

随机推荐

  1. OS开发小记:iOS富文本框架DTCoreText在UITableView上的使用

    要在页面中显示自己的布局,比如文字的字体和颜色.图文并排的样式,我们要用iOS SDK的原生UI在app本地搭建,如果一个页面需要在服务器端获取数据的话,我们也要在本地搭建好固定的布局,解析服务器传回 ...

  2. python各种模块的使用

    Pexpect模块:http://www.ibm.com/developerworks/cn/linux/l-cn-pexpect1/ ConfigParser模块:http://blog.china ...

  3. VIM之打开、保存文件

    如何使用命令 在Normal mode下,输入':'字符,在GVIM界面左下可以看到如图所示的界面: 这时候可以键入命令,输入完后按下键盘上的Enter键即可执行命令. 打开文件 使用命令:e [文件 ...

  4. Hadoop 解除 NameNode is in safe mode

    运行Hadoop程序时,有时候会报以下错误: org.apache.hadoop.dfs.SafeModeException: Cannot delete /user/hadoop/input. Na ...

  5. spring cloud各个模块作用

    Eureka Client:负责将这个服务的信息注册到Eureka Server中.Eureka Server:注册中心,里面有一个注册表,保存了各个服务所在的机器和端口号.ribbon:负载均衡,获 ...

  6. 我的QT5学习之路(四)——信号槽

    一.前言 前面说了Qt最基本的实例创建.控件以及工具集的介绍,相当于对于Qt有了一个初次的认识,这次我们开始认识Qt信号通信的重点之一——信号槽. 二.信号槽 信号槽是 Qt 框架引以为豪的机制之一. ...

  7. Vue04——vue自定义事件、Router、Vue-cli、发布上线

    一.Vue的自定义事件 点击任何一个按钮,按钮本身计数累加,但是每点击三个按钮中的一个,totalCounter 都要累加. <body> <div id="app&quo ...

  8. 使用XWAF框架(3)——下载文件

    XWAF提供了HttpFileDownloader类用于简化用户下载文件的编码.该类提供了重载方法“downloadFile(String filePath, String fName)”实现下载.程 ...

  9. 一个简单的Linux启动jar包的shell脚本

    背景: 项目设备端需要运行jar包程序与服务端进行socket连接并发送数据,每次启动进程时,都需要在Linux终端输入启动jar包的命令,比较繁琐,随之尝试将启动jar包的命令写入shell脚本文件 ...

  10. node创建服务器

    //引入核心模块 const http = require('http'); //创建服务器 http.createServer((req,res)=>{ }).listen(3000); // ...