带有自定义模板

Question

我是棱角分明的新人，我试图解决这个问题。我有以下html

<div ng-repeat="el in elements">
    <div ng-basicmenuinput basic-input="el"></div>
</div>

并且在控制器中我有以下elements

        $scope.elements = [
            {
                type: "A",
                name: "AAA"
            },
            {
                type: "B",
                name: "BBB"
            }

        ];

我已经创建了以下指令

.directive('ngBasicmenuinput', function () {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            basicInput: "="
        },
        template: function () {
            return '<div class="basicMenuInput">{{basicInput.name}}</div>';
        }
    }
})

现在在模板功能上我想做这样的事情：

    template: function () {
        if(basicInput.type=="A") // basicInput is undefined
        return '<div class="basicMenuInput">{{basicInput.name}}</div>';
    }

但basicInput未定义。基本上我想做的就是根据basicInput.type返回一个不同的模板。我做了什么（以有角度的方式）可以吗？

Answer 1

请注意。要在视图（html）中使用自己的自定义指令，您需要注意命名约定。如果你命名你的指令ngBasicMenuInput，那么考虑到camelCase，它将被标准化为“ng-basic-menu-input”。

Answer 2

template: function () {
        return '<div ng-if=basicInput.type=="A" class="basicMenuInput">{{basicInput.name}}</div>';
    }

Answer 3

使用ng-if / ng-switch / ng-show / ng-hide

您不能在模板中放置这样的条件。 相反，在模板中使用此视图决定协助角度，如下所示：

使用ng-if的示例：

<div ng-if="basicInput.type=='A'" class="basicMenuInput">
   {{basicInput.name}}
</div>
<div ng-if="basicInput.type=='B'">
   ...
</div>