NG-交换机内部采用NG-transclude [英] Using ng-transclude inside ng-switch

问题描述

我遇到了麻烦NG-transclude到NG-开关默认指令进行工作。这里是我的code：

I'm having trouble getting ng-transclude to work within an ng-switch-default directive. Here's my code:

指令：

.directive('field', ['$compile', function($complile) {
        return {
            restrict: 'E',
            scope: {
                ngModel: '=',
                type: '@',
            },
            transclude: true,
            templateUrl: 'partials/formField.html',
            replace: true
        };
    }])

的谐音/ formField.html 的

partials/formField.html

<div ng-switch on="type">
    <input ng-switch-when="text" ng-model="$parent.ngModel" type="text">
    <div ng-switch-default>
        <div ng-transclude></div>
    </div>
</div>

我把它像这样...

I call it like so...

<field type="other" label="My field">
    test...
 </field>

它产生错误：

[ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found.

它工作顺利，在NG-开关指令之外，我在如何虽然得到这个工作的损失。有什么建议？

It works without a hitch, outside of the ng-switch directive, I'm at a loss on how to get this working though. Any suggestions?

编辑：
这里有一个现场演示： http://plnkr.co/edit/3CEj5OY8uXMag75Xnliq?p=preVIEW

推荐答案

来自的 Github的问题

的问题是，NG-交换机使用transclude为好，这导致错误。

The problem is that ng-switch is using a transclude as well, which leads to the error.

在这种情况下，你应该创建一个使用权$ transclude功能的新指令。对于这项工作，存储在你的父母指令的控制器$ transclude（在你的案场），并创建一个新的指令，它引用了控制器，并使用其$ transclude功能。

In this case, you should create a new directive that uses the right $transclude function. For this to work, store the $transclude in the controller of your parent directive (in your case field), and create a new directive that references that controller and uses its $transclude function.

在您的例子：

.directive('field', function() {
  return {
       ....
      controller: ['$transclude', function($transclude) {
        this.$transclude = $transclude;
      }],
      transclude: true,
       ....
  };
})
.directive('fieldTransclude', function() {
  return {
    require: '^field',
    link: function($scope, $element, $attrs, fieldCtrl) {
      fieldCtrl.$transclude(function(clone) {
        $element.empty();
        $element.append(clone);
      });
    }
  }
})

在HTML，你就用＆LT; D​​IV现场transclude＆GT; 而不是＆LT; D​​IV NG-transclude＆GT; 。

In the html, you then just use <div field-transclude> instead of <div ng-transclude>.

下面是一个更新的plunker： http://plnkr.co/edit/au6pxVpGZz3vWTUcTCFT p = preVIEW

Here is an updated plunker: http://plnkr.co/edit/au6pxVpGZz3vWTUcTCFT?p=preview

这篇关于NG-交换机内部采用NG-transclude的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！