Question

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

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

我需要申请＆＃34; my-custom-directive＆＃34;仅在定义{{item}}时。

Answer 1

这感觉就像是设计问题而不是技术问题。

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

例如，如果在这种情况下未定义item，则只需在指令中执行操作。

Answer 2

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

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

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

Answer 3

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

AngularJS在DOM中留下评论作为参考，

所以在定义<li my-custom-directive="{{item}}">之前，{{item}}根本不在DOM中。

如果需要从变量动态地向DOM添加指令，请使用$ compile provider。我已经为自己创造了这样的指令

    angular.module('test', []).directive('directiveName', ['$compile',      function($scope) {
        return {
            link: function($scope, element, attrs, ctrl) {
            element.replaceWith($compile(attrs.direciveName)($scope))
        }
    }
    }]);

你可以这样使用它：

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

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

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

3 个答案: