带有自定义模板的AngularJS指令

Question

我不熟悉Angle，并且正在尝试解决此问题。 我有以下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

请注意。 要在view（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

您不能在模板中放置类似条件。 相反，可以在模板中通过此视图决策来帮助angular，如下所示：

使用ng-if示例：

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