Question

是否可以根据范围变量决定是否对元素应用转换？

例如（愚蠢的简化示例，我试图实现的目标）

app.directive('myHighlight', function () { 
  return {
    transclude : true,
    template : "<div style='border:1px solid red'><span ng-transclude></span></div>"
  }
});

app.directive('myDirective', function () { 
  return { 
    template : "<span>some text</span>",
    link : function (scope,element,attr) { 
        if ( 'shouldHighlight' in attr) {
          // wrap this directive with my-highlight
        }
    }
  }
});

然后在html中

<span my-directive></span>
<span my-directive should-highlight></span>

请注意，请不要告诉我只是添加亮点而不是应该突出显示，因为我说这是一个愚蠢的缩减示例。感谢。

Answer 1

而不是可选地应用高亮度指令，总是应用它并在该指令内执行可选的包装。使用ng-if和通过标记从myDirective传递到myHighlight的布尔值实现可选包装：

<div my-highlight="someBooleanValue">some text</div>

myHighlight模板：

<div ng-if="actuallyTransclude" style="border:1px solid red">
    <span ng-transclude></span>
</div>
<div ng-if="!actuallyTransclude" ng-transclude></div>

工作jsfiddle：http://jsfiddle.net/wilsonjonash/X6eB5/

Answer 2

不确定。当您指定transclude选项时，您知道可以使用ng-transclude以声明方式指示内容的去向。

在指令的链接函数中，您还将获得对transclude函数的引用（https://docs.angularjs.org/api/ng/service/ $ compile，请参阅链接部分）：

function link(scope, iElement, iAttrs, controller, transcludeFn) { ... }

transcludeFn将返回已转换的内容，因此您可以在指令的link函数中有条件地插入所需内容。

示例（http://jsfiddle.net/DKLY9/22/）

HTML

<parentdir flg="1">
    Child Content
</parentdir>

JS

app.directive('parentdir', function(){
    return {
        restrict : 'AE',
        scope: {
            flg : "="
        },
        transclude : true,
        template : "<div>Parent {{childContent}} Content</div>",
        link : function(scope, elem, attr, ctrl, transcludeFn){
            if (scope.flg==1){ 
                scope.childContent="Include Me instead";
            } 
            else {
                scope.childContent = transcludeFn()[0].textContent; 
            }
      }
    }
});

这是一个简化的例子。要更好地了解如何使用transclude函数，请参阅以下内容：http://blog.omkarpatil.com/2012/11/transclude-in-angularjs.html

Answer 3

当我接近这些问题时，我只看看角度是什么。通常它们的源代码非常易读且易于重用。 ngTransclude也不例外：

https://github.com/angular/angular.js/blob/master/src/ng/directive/ngTransclude.js

我把剩下的留给你。您可以创建自己的transclusion指令，该指令也接收条件，或者只在if条件为true时将代码复制到特定指令中。

如果您仍有问题，请告诉我们，我们会设置一名侦探。

有条件地将transclution应用于指令吗？

3 个答案: