错误：[$ parse：syntax]语法错误：令牌＆＃39; in＆＃39;是一个意外的令牌

Question

我尝试在自定义指令的下拉列表中更改字符串（使用主题＆＃39;中的＆＃39;主题）并获取此语法错误。

当我在主题＆＃39;中设置＆＃39;主题时表达到该元素的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>"
    }
}