Angular指令 - 请求transclusion？ [英] Angular directive - asking for transclusion?

问题描述

我在下面得到一个错误，我不明白为什么。任何想法？

html，

 <按钮ng-click =loadForm（）>加载指令表单< / button> 
< div data-my-form>< / div> 
  

角，

  app.directive（'myForm'，function（）{
 return {
 replace：true，
 controller：function（$ scope）{
 $ scope。 isLoaded = false; 
 $ scope.loadForm = function（）{
 $ scope.isLoaded = true; 
} 
}，
模板：'< div ng -if =isLoadedng-include =\'form.php\'>< / div>'，
 link：function（scope，element）{
 
} 
} 
}）; 
  

错误，

 错误：[$ compile：multidir]多个指令[ngInclude，ngInclude]要求包含：< div data-my-form =ng-if =isLoadedng-include ='表单.PHP'> 
  

修正，

 '< div>< div ng-if =isLoadedng-include =\'form.php\\''>< / div>< / div>'
  

但为什么我必须将换行在div中？是错误的吗？

解决方案

错误很明显。在尝试使用transclusion的相同元素上有两个指令：

  1。 ng-if 
 2. ng-include 
  

一个元素只能应用一个变形。

为了解决这个问题，试试这个：

 < div data -my-form =ng-if =isLoaded> 
< div ng-include ='form.php'> < / DIV> 
< / div> 
  

I get an error below and I don't understand why. Any ideas?

html,

<button ng-click="loadForm()">Load Directive Form</button>
<div data-my-form></div>

angular,

   app.directive('myForm', function() {
        return {
          replace:true,
          controller:function($scope){
            $scope.isLoaded = false;
            $scope.loadForm = function(){
              $scope.isLoaded = true;
            }
          },
          template: '<div ng-if="isLoaded" ng-include="\'form.php\'" ></div>',
          link:function(scope, element) {

          }
        }
    });

error,

Error: [$compile:multidir] Multiple directives [ngInclude, ngInclude] asking for transclusion on: <div data-my-form="" ng-if="isLoaded" ng-include="'form.php'">

a fix,

'<div><div ng-if="isLoaded" ng-include="\'form.php\'" ></div></div>'

but why do I have to wrap it in a div? is it a angular bug?

解决方案

The error is clear. There are two directives on the same element that is trying to use transclusion:

1. ng-if 
2. ng-include

An element can only apply one transclusion.

To fix, try this instead:

<div data-my-form="" ng-if="isLoaded">
   <div ng-include="'form.php'"> </div>
</div>

这篇关于Angular指令 - 请求transclusion？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！