AngularJs有条件地将自定义指令应用于HTML

Question

是否有正确的方法将自定义指令应用于基于某些条件的HTML模板

例如：<li my-custom-directive="{{item}}">

只有在定义了｛｛item｝｝的情况下，我才需要应用"我的自定义指令"。

Answer 1

这感觉像是一个设计问题，而不是技术问题。

与其有条件地应用自定义指令，不如简单地弄清楚在指令中该做什么。从语义上讲，这更有意义。

例如，在这种情况下，如果项未定义，请不要在指令中执行操作。

Answer 2

使用ng-if，在满足条件之前不会插入DOM。

AngularJS在DOM中留下一条注释供其参考，

因此CCD_ 3在定义CCD_。

如果需要从变量向DOM动态添加指令，请使用$compile provider。我为创建了一个指令

angular.module（'test'，[]）.指令（'directiveName'，['$compile'，function（$scope）{返回{链接：函数（$scope，element，attrs，ctrl）{element.replaceWith（$compile（attrs.direciveName）（$scope））}}}])；

你可以这样使用它：

<div directive-name="{{customDirectiveName}}"></div>

{{customDirectiveName}}是来自其他地方的$scope变量。从这一点开始，您可以在从服务器接收的JSON对象上重复，等等。

Answer 3

这取决于您的需求，如果您使用它作为元素而不是属性，则可以使用ng-if实现。

对于以下代码中的ex，当项目未定义时，li不会出现在dom中，

<my-custom-directive="{{item}}" ng-if="item">
    <li>{{item}}</li>
</my-custom-directive>