Question

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

例如

<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（需要编译）添加到我的内部生成的指令中。即，我有一个＆lt; form＆gt;包装器指令（a-directive）和＆lt; input＆gt;指令（inner-directive），我想基于form指令的属性在输入指令中动态添加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

两件事：

关于您的问题：您可以在a-directive的link函数中查找“shoe-it”值，并将连接内容附加到元素：

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

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

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

多个指令[innerDirective，attrDirective]要求模板开启：＆lt; inner-directive attr-directive =“hello”＆gt;

所以你应该决定另一个指令应该做什么。以下是一个示例：http://jsbin.com/OJACOqu/40/edit

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

2 个答案: