如何有条件地将属性指令添加到子指令？

Question

我有一个指令，我想将一个显示值传递给它，它有条件地编译一个内部指令的属性指令。

例如，

<a-directive show-it="showIt"></a-directive>

如果showIt 为真，我希望将其替换为

<a-directive show-it="showIt">
  <inner-directive value="[some expression]">
    <div>[some expression evaluated]</div>
  </inner-directive>
</a-directive>

在哪里

• [some expression] 需要被解释（我猜它需要是$compile'd，但我不确定）
• inner-directive 在它自己的模板文件中，并且有自己的链接功能，可以设置一些东西

否则，如果showIt 为假，我希望将其替换为

<a-directive show-it="showIt">
  <inner-directive></inner-directive>
</a-directive>

此处显示了一个示例：

http://jsbin.com/uBIceCi/29/edit（$compile 如果您取消注释，我会创建一个无限循环 - 在 prelink 和 postlink 函数中都尝试过）。

http://jsbin.com/uBIceCi/7/edit（旧示例）

更新：

我的实际应用是我想有条件地将typeahead（需要编译）添加到我的内部生成指令中。即，我有一个

包装指令 (a-directive) 和一个 指令 (inner-directive)，我想根据表单上的属性在输入指令中动态添加 typeahead 属性指令指令。

有什么想法吗？

Answer 1

您可以在指令的链接功能中选择所需的模板，如下所示

var app = angular.module('app', []);
app.controller('MainCtrl', function ($scope) {
    $scope.showIt = false;
})
app.directive('aDirective', function ($compile) {
    return {
        restrict: 'EA',
        link: function (scope, element, attrs) {
            var template1 = '<div>template1</div>';
            var template2 = '<div>template2</div>';
            if (scope.showIt) {
                element.append($compile(template1)(scope));
            } else {
                element.append($compile(template2)(scope));
            }
        },
        scope: {
            showIt: '='
        }
    }
});

在你看来：

<div ng-app="app" ng-controller="MainCtrl">
    <a-directive show-it="showIt"> </a-directive>
</div>

Answer 2

两件事：

1. 关于您的问题：您可以在 a-directive 的链接功能中查看“shoe-it”值并将连接内容附加到元素：

     var content = scope.showIt ? '<inner-directive attr-directive="hello"></inner-directive>'
                                : '<inner-directive ></inner-directive>';
     element.append($compile(content)(scope));
   

如果你在内部指令中这样做，你会得到一个无限循环，因为指令会自己编译，所以实际上链接函数会调用自己。

1. 您遇到的另一个问题是 inner-directive 和 attr-directive 都尝试更改模板，因此您收到以下错误：

多个指令 [innerDirective, attrDirective] 要求 模板：

所以你应该决定其他指令应该做什么。这是一个例子：http://jsbin.com/OJACOqu/40/edit