angularjs定制指令通过属性有条件templateUrl [英] angularjs custom directive conditional templateUrl via attribute

查看：175
本文介绍了angularjs定制指令通过属性有条件templateUrl的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图通过属性来加载条件模板的URL，我的指令如下：

该指令是在NG-repeate当box.key =='经验'的前pression正在恢复教育form.php的，而不是经验-form.php的。

 ＆LT; D​​IV多形式
   指令数据='directiveData
   模板URL =box.key =='经验'的经验-form.php的：教育form.php的'。
   项=项目
   形式=形式
   表单名称={{box.key}} {{item._id}}
   的OnSave =updateMultipleUser（box.key，item._id，$数据）
   onreset =formAction（$表格名称，'复位'）
   取消=formAction（$表格名称，取消）
   ＆GT;
＆LT; / DIV＆GT;

指令DDO 

  {
     限制：'A'，
     更换：真实，
     范围： {
         directiveData：'='，
         的OnSave：'和;，
         onreset：'和;'，
         取消：'和;，
         表格名称：'@'，
         形式：=，
         项：'='
     }，
     控制器：控制器，
     templateUrl：功能（tElement，tAttrs）{
         返回$ rootScope $的eval（tAttrs.templateUrl）。
     }
 }

尝试使用链接功能

 ＆LT; D​​IV多形式
   指令数据='directiveData
   模板映射={
   经历：经验-form.php的，
   课程：教育form.php的
   }
   盒=盒子
   项=项目
   形式=形式
   表单名称={{box.key}} {{item._id}}
   的OnSave =updateMultipleUser（box.key，item._id，$数据）
   onreset =formAction（$表格名称，'复位'）
   取消=formAction（$表格名称，取消）
   ＆GT;
＆LT; / DIV＆GT; 控制器：控制器，
     链接：功能（范围，元素，ATTRS）{
         //显示正确的模板网址...现在该怎么办？
         的console.log（scope.templateMap [scope.box.key]）;
     }，
     templateUrl：功能（tElement，tAttrs）{
         回报的经验-form.php的';
     }


解决方案

标记 

 ＆LT; D​​IV多形式
   指令数据='directiveData
   NG-ATTR模板-URL ={{box.key =='经验'的经验-form.php的：教育form.php的'}}
   项=项目
   形式=形式
   表单名称={{box.key}} {{item._id}}
   的OnSave =updateMultipleUser（box.key，item._id，$数据）
   onreset =formAction（$表格名称，'复位'）
   取消=formAction（$表格名称，取消）
   ＆GT;
＆LT; / DIV＆GT;

那么你templateUrl职能将是

  templateUrl：功能（tElement，tAttrs）{
     $超时（函数（）{//等到NG-ATTR评估值。
         返回tAttrs.templateUrl;
     }）
 }

不知道它会工作或没有。

更新

另一种方式obivious会从链接功能加载模板，并从那里自我追加它，而不是通过 templateUrl

有电话模板

HTML 

 ＆LT; D​​IV多形式
   指令数据='directiveData
   模板路径={{box.key =='经验'的经验-form.php的：教育form.php的'}}
   项=项目
   形式=形式
   表单名称={{box.key}} {{item._id}}
   的OnSave =updateMultipleUser（box.key，item._id，$数据）
   onreset =formAction（$表格名称，'复位'）
   取消=formAction（$表格名称，取消），＆GT;
＆LT; / DIV＆GT;

指令 

  {
     限制：'A'，
     更换：真实，
     范围： {
         directiveData：'='，
         的OnSave：'和;，
         onreset：'和;'，
         取消：'和;，
         表格名称：'@'，
         形式：=，
         项：'='，
         的templatePath：'@'
     }，
     控制器：控制器，
     链接：功能（范围，元素，ATTRS）{
         //这里你将有模板路径在scope.templatePath变量
         //你可以用它加载的模板。
         变种模板= getTemplate（）; //这可以通过下面提及的方式进行
         element.append（$编译（模板）（范围））; // addding编译元素
     }
 }

在你的链接功能，你可以通过装载需求模板追加指令模板，还有加载从指令模板几个办法

使用$ templateCache

在使用 $ templateCache 你需要把该模板的角 $ templateCache 在运行阶段，

  app.run（函数（$ templateCache）{
   $ templateCache.put（'myTemplate.html'，'＆LT; D​​IV＆GT;＆MyTemplate的LT; / DIV＆GT;'）
}）

这样做后，你可以eaisily只是通过增加访问指令，模板 $ templateCache.get（'myTemplate.html'）

在 $ templateCache 添加模板的另一种方法是使用剧本标记键入=文/ NG-模板 

 ＆LT;脚本类型=文/ NG-模板ID =myTemplate.html＆GT;
  ＆LT; D​​IV＆GT;＆MyTemplate的LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;

使用$ http.get

您可以做在它的成功使用 $ http.get（'myTemplate.html'）你会得到的数据得到的模板，不过HTML内容文件。你可以编译和HTML附加到你的指令元素。

使用NG-包括

您可以用NG-include指令在这里。你需要做的创建一个虚拟分区，将有希望的模板路径如℃的NG-include指令; DIV NG-包括=的templatePath ＆GT;＆LT; / DIV＆GT; ，将加载在该专区的模板。如果你不希望使用DIV那么你可以使用＆LT; NG-包括SRC =的templatePath＆GT;＆LT; / NG-包括＆GT; 。但是，这不是在做code的多preferable方式。因为它创建子范围，想NG重复做。

I am trying to load conditional template urls via attributes, my directives is as follows.

The directive is in a ng-repeate and when box.key == 'experiences' the expression is returning education-form.php and not experiences-form.php.

<div multiple-form
   directive-data='directiveData'
   template-url="box.key == 'experiences'? 'experiences-form.php':'education-form.php'"
   item="item"
   forms="forms"
   form-name="{{box.key}}{{item._id}}"
   onsave="updateMultipleUser(box.key, item._id, $data)"
   onreset="formAction($formName, 'reset')"
   cancel="formAction($formName, 'cancel')"
   >
</div>

Directive DDO

 {
     restrict: 'A',
     replace: true,
     scope: {
         directiveData: '=',
         onsave: '&',
         onreset: '&',
         cancel: '&',
         formName: '@',
         forms: '=',
         item: '='
     },
     controller: controller,
     templateUrl: function(tElement, tAttrs) {
         return $rootScope.$eval(tAttrs.templateUrl);
     }
 }

attempting using link function

<div multiple-form
   directive-data='directiveData'
   template-map="{
   experiences:'experiences-form.php',
   courses:'education-form.php'
   }"
   box="box" 
   item="item"
   forms="forms"
   form-name="{{box.key}}{{item._id}}"
   onsave="updateMultipleUser(box.key, item._id, $data)"
   onreset="formAction($formName, 'reset')"
   cancel="formAction($formName, 'cancel')"
   >
</div>

 controller: controller,
     link: function(scope, element, attrs) {
         // shows correct template url ... now what?
         console.log(scope.templateMap[scope.box.key]);
     },
     templateUrl: function(tElement, tAttrs) {
         return 'experiences-form.php';
     }

解决方案

Markup

<div multiple-form
   directive-data='directiveData'
   ng-attr-template-url="{{box.key == 'experiences'? 'experiences-form.php':'education-form.php'}}"
   item="item"
   forms="forms"
   form-name="{{box.key}}{{item._id}}"
   onsave="updateMultipleUser(box.key, item._id, $data)"
   onreset="formAction($formName, 'reset')"
   cancel="formAction($formName, 'cancel')"
   >
</div>

Then your templateUrl function would be

 templateUrl: function(tElement, tAttrs) {
     $timeout(function(){ //wait until the ng-attr evaluates a value.
         return tAttrs.templateUrl;
     })
 }

Not sure it will work or not.

Update

Another obivious way would be loading template from the link function and append it from there it self rather than having call template through templateUrl

HTML

<div multiple-form
   directive-data='directiveData'
   template-path="{{box.key == 'experiences'? 'experiences-form.php':'education-form.php'}}"
   item="item"
   forms="forms"
   form-name="{{box.key}}{{item._id}}"
   onsave="updateMultipleUser(box.key, item._id, $data)"
   onreset="formAction($formName, 'reset')"
   cancel="formAction($formName, 'cancel')">
</div>

Directive

 {
     restrict: 'A',
     replace: true,
     scope: {
         directiveData: '=',
         onsave: '&',
         onreset: '&',
         cancel: '&',
         formName: '@',
         forms: '=',
         item: '=',
         templatePath: '@'
     },
     controller: controller,
     link: function(scope, element, attrs){
         //here you will have template path in your scope.templatePath variable
         //you can load template using it.
         var template = getTemplate(); //this can be done by below mentioned way
         element.append($compile(template)(scope));//addding compiled element
     }
 }

Inside your link function you could append directive template by loading template on demand, there are several way to load template from directive

Using $templateCache

While using $templateCache you need to put that template in angular $templateCache at the run phase, 

app.run(function($templateCache){
   $templateCache.put('myTemplate.html', '<div>myTemplate</div>')
})

After doing this you could eaisily access that template in directive just by adding $templateCache.get('myTemplate.html')

Another way of adding template in $templateCache would be using script tag with type="text/ng-template"

<script type="text/ng-template" id="myTemplate.html">
  <div>myTemplate</div>
</script>

Using $http.get

You could do get the template by using $http.get('myTemplate.html') in success of it you will get data that is nothing but html content that file. You could compile and append that html to your directive element.

Using ng-include

You could use ng-include directive here. You need to do create a dummy div that will have an ng-include directive with desired template-path like <div ng-include="templatePath"></div>,it will load a template in that div. If you don't want to use div then you could use <ng-include src="templatePath"></ng-include>. But this is not much preferable way of doing code. because it does create child scope like ng-repeat does.

这篇关于angularjs定制指令通过属性有条件templateUrl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆