错误：[$parse:syntax] 语法错误：令牌“in”是一个意外的令牌

Question

我正在尝试更改自定义指令内下拉列表中的字符串（使用下面的“主题中的主题”）并出现此语法错误。

当我在该元素上将“主题中的主题”表达式设置为 ng-repeat 时，它会重复每个下拉菜单 3 次（即 3 个日期、3 个状态、3 个公司）。像这样：

我在这里唯一想做的就是动态更改每个下拉菜单的主题。任何帮助表示赞赏。

这是我的指令（app.js）：

var varMyDirectivesApplication =
        angular.module('myDirectivesApplication', []);

    varMyDirectivesApplication.directive('dropdownMultiselect', function () {
        return {
            restrict: 'E',
            scope: {
                model: '=',
                options: '=',
            },
            template:

            "<div data-ng-class='{open: open}'>" +"<li data-ng-class='{open: open}'>" +
                "<a class='dropdown-toggle'>Select {{ topic in topics }}</a>" +
                "</li>" +

                "<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" +

                    "<li data-ng-repeat='option in options'>

                        <a>{{option.name}}</li>" +

                "</ul>" +

            "</div>",

            controller: function ($scope) {

                $scope.topics = ['Date', 'Status', 'Company'];

            }

        }

    }

 $scope.dates = [
            { "id": "1 Week", "name": "1 Week" },
            { "id": "2 Weeks", "name": "2 Weeks" },
            ...
 ];

 $scope.statuses = [
      { "id": "Draft", "name": "Draft" },
      { "id": "Inbound", "name": "Inbound" },
      ...
  ];

  $scope.companies = [
       { "id": "ABC Manufacturing", "name": "ABC Manufacturing" },
       ...
  ];

$scope.selectedIds = [];

});

HTML：

<dropdown-multiselect model="selectedIds" options="dates"></dropdown-multiselect>

<dropdown-multiselect model="selectedIds" options="statuses"></dropdown-multiselect>

<dropdown-multiselect model="selectedIds" options="companies"></dropdown-multiselect>

<ul class="list-unstyled margin-0" >
    <li data-ng-repeat="item in selectedIds" class="pointer-hover" ng-click="remove(item)">
        {{ item }}
    </li>
</ul>

Answer 1

一种方法是将主题作为属性传递到指令中。

类似这样的：

<dropdown-multiselect model="selectedIds" options="dates" topic="Date"></dropdown-multiselect>

您的指令将如下所示：

varMyDirectivesApplication.directive('dropdownMultiselect', function () {
    return {
        restrict: 'E',
        scope: {
            model: '=',
            options: '=',
            topic: '@'
        },
        template:
            "<div data-ng-class='{open: open}'>" +"<li data-ng-class='{open: open}'>" +
                "<a class='dropdown-toggle'>Select {{ topic }}</a>" +
                "</li>" +
                "<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" +
                    "<li data-ng-repeat='option in options'>
                        <a>{{option.name}}</li>" +
                "</ul>" +
            "</div>"
    }
}