帶有自定義模板的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>