無法在Angular指令中使用動態模板

Question

我正在嘗試編寫一個具有3種模式的小型角度應用程序。 質量檢查，生產和沙盒。 QA具有多個按鈕，因此用戶可以選擇所需的任何值並填充“ myModel”。 生產和沙箱這另外兩種模式在它們旁邊都有按鈕，以應用先前選擇的Qa值（使用同步功能從myModel獲取）。

我對QA（多個按鈕）和Production，Sandbox（用於從QA-mymodel同步的單個按鈕）使用了不同的模板。我能夠很好地渲染QA / Production模板，但是QA模板（按鈕列表）沒有顯示完全沒有

我猜測按鈕列表的編譯方式發生問題。

請在以下位置查看我的代碼： http : //jsbin.com/sutipo/1/watch?html,js,output

我用來動態提取模板的HTML和指令如下：

    <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
    };
});

這里有角新手，請問有人可以幫助我理解為什么按鈕模板列表沒有正確編譯嗎？

預期輸出應如下所示：

Answer 1

您定義了一些屬性以傳遞到指令的隔離范圍，但從未傳遞實際的模型引用：

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

孤立范圍指令對父級范圍一無所知，因此必須使用所有通過屬性顯式傳遞的數據