无法使动态模板在Angular指令中工作

Question

我正在尝试编写一个有3种模式的小角应用程序。 QA，Production和Sandbox。 QA是具有多个按钮的东西，因此用户可以选择他想要的任何值并填充＆＃34; myModel＆＃34;。其他两种模式，生产和沙箱旁边有按钮，以应用先前选择的Qa值（来自myModel，使用同步功能）。

我使用不同的QA模板（多个按钮）和Production，Sandbox（从QA- mymodel同步的单个按钮。）我可以渲染QA / Production模板，但是QA模板（按钮列表）没有＆＃ 39; t显示出来。

我猜测按钮列表编译的方式有问题。

  

请参阅我的代码：http://jsbin.com/sutipo/1/watch?html,js,output

HTML＆amp;我用于动态拾取模板的指令如下：

    <tr>
        <td> <strong>Production : </strong>  </td>
        <td> {{types.production.text}} </td>
        <td><app-typedisplay env="production" status="non-base"></app-typedisplay></td>
    </tr>
    <tr>
        <td> <strong>SandBox : </strong>  </td>
        <td> {{types.sandbox.text}}  </td>
        <td><app-typedisplay env="sandbox" status="non-base"></app-typedisplay></td>
    </tr>
    <tr>
        <td><strong>QA : </strong>
        <td> {{types.qa.text}}  </td>
        <td><app-typedisplay env="qa" status="base"></app-typedisplay></td>
    </tr>

指令：

app.directive('appTypedisplay', function ($compile) {

    var getTemplate = function (content) {
        var template = '';
        var base = "<button type='button' class='btn btn-default' " +
            "ng-class='{active: option.text == model.text}'" +
            "ng-repeat='option in options' " +
            "ng-click='activate(option)'>{{option.text}} " +
            "</button>";

        var non_base = "<td> <button " +
            'ng-click=\'sync("' + content.env + '")\'>' +
            "Sync to " + content.env + "</button> </td>";

        switch (content.status) {
            case 'base':
                template = base;
                break;
            case 'non-base':
                template = non_base;
                break;
        }

        return template;
    };

    var linker = function (scope, element, attrs) {
        element.html(getTemplate(attrs));
        $compile(element.contents())(scope);
    };

    return {
        restrict: 'E',
        scope: {
            model: '=',
            options: '=',
            env: '='
        },
        controller: function ($scope) {
            $scope.activate = function (option) {
                $scope.model = option;
            };
        },
        link: linker
    };
});

Angular新手在这里，有人可以帮我理解为什么按钮模板列表没有正确编译？

预期输出应如下所示：

Answer 1

您定义了一些属性以传递到指令的隔离范围，但从未传递实际的模型引用：

<app-typedisplay env="qa" status="base" options="options" model="myModel"></app-typedisplay>

隔离范围指令对父母的范围一无所知，因此所有使用的数据必须通过属性显式传入