javascript - 无法让动态模板在 Angular 指令中工作

Question

我正在尝试编写一个具有 3 种模式的小型 Angular 应用程序。质量保证、生产和沙盒。 QA 是具有多个按钮的东西，以便用户可以选择他想要的任何值并填充“myModel”。其他 2 种模式(生产模式和沙箱模式)旁边有按钮，用于应用之前选择的 Qa 值(来自 myModel，使用同步功能)。

我正在使用不同的模板进行质量检查(多个按钮)和生产，沙盒(从质量检查-mymodel 同步的单个按钮。)我能够很好地渲染质量检查/生产模板，但质量检查模板(按钮列表)却不能'根本不出现。

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

Please see my code at : 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
    };
});

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

预期输出应如下所示:

Answer 1

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

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

isolate 作用域指令对父作用域一无所知，因此使用的所有数据都必须通过属性显式传入