javascript - 带有自定义模板的 AngularJS 指令

Question

我是 Angular 的新手，我正在尝试解决这个问题。我有以下 html

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

在 Controller 中我有以下元素

        $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 返回一个不同的模板。我所做的(以 Angular 方式)可以吗？

Answer 1

请注意。要在 View (html) 中使用您自己的自定义指令，您需要注意命名约定。如果你将你的指令命名为 ngBasicMenuInput，那么考虑到驼峰命名法，它会被规范化为“ng-basic-menu-input”。