Question

我正在尝试通过属性加载条件模板URL，我的指令如下。

该指令处于ng-repeate状态，当box.key =='experience'时，表达式返回education-form.php而不是experience-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>

指令DDO

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

尝试使用链接功能

<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';
     }

Answer 1

<强>标记

<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>

然后你的templateUrl函数将是

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

不确定它是否有效。

<强>更新

另一种明显的方法是从链接功能加载模板并从那里附加它自己而不是通过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>

<强>指令

 {
     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
     }
 }

在您的链接功能中，您可以通过按需加载模板来附加指令模板，有几种方法可以从指令加载模板

使用$ templateCache

使用$templateCache时，您需要在运行阶段将该模板放在角度$templateCache中，

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

执行此操作后，您只需添加$templateCache.get('myTemplate.html')

即可在指令中轻松访问该模板

在$templateCache中添加模板的另一种方法是将script标记用于type="text/ng-template"

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

使用$ http.get

您可以使用$http.get('myTemplate.html')成功获取模板，您将获得的数据只是文件的html内容。您可以编译并将该html附加到指令元素。

使用ng-include

您可以在此处使用ng-include指令。您需要创建一个虚拟div，它将具有所需template-path的ng-include指令，如<div ng-include="templatePath"></div>，它将在该div中加载模板。如果您不想使用div，则可以使用<ng-include src="templatePath"></ng-include>。但这不是一个更好的代码编写方式。因为它确实创建了像ng-repeat那样的子范围。

angularjs自定义指令条件templateUrl via属性

1 个答案:

使用$ templateCache

使用$ http.get

使用ng-include