指令“selectUser”的模板必须只有一个根元素

Question

我在多个地方使用指令 select-user ，并且一切正常。但是当我在指令 html 模板中添加一个新的 html 元素位置时的问题。如果我在 div 元素中使用，则两者都不起作用。

总是错误返回“指令'selectUser'的模板必须只有一个根元素”

我必须添加一个复选框并根据复选框值更改想要更改数据源。

这样的指令调用

<select-user ng-model="UserId"></select-user>

我在 js 文件中有一个指令代码

App.directive('selectUser', ['$http', '$timeout', '$rootScope', function ($http, $timeout, $rootScope) {
    return {
        restrict: 'E',
        require: 'ngModel',
        templateUrl: 'app/shared/partial/userlist.html',
        replace: true,
        scope: {
            isDisabled: '=?', // optional                     

        },
        link: function (scope, element, attr, ngModelCtrl) {
            scope.$watch('isDisabled', function (newVal) {
                scope.accessDisabled = newVal;

                if (newVal == undefined || newVal == null) {
                    scope.accessDisabled = false;
                }
            });

            scope.LoadUsers = function () {

                scope.teamUsers = response;//data from API.

        }
        }
    };
}]);

用户列表.html

 <select id="teamUsers" data-placeholder="Select User" chosen="" class="chosen-select input-md"
            ng-options="user.EncryptedID as user.EmployeeName+' '+user.EmployeeLastName+', '+user.TeamName  for user in teamUsers"
            ng-disabled="accessDisabled">
        <option disabled></option>

    </select>

-- 错误html

<select id="teamUsers" data-placeholder="Select User" chosen="" class="chosen-select input-md"
                ng-options="user.EncryptedID as user.EmployeeName+' '+user.EmployeeLastName+', '+user.TeamName  for user in teamUsers"
                ng-disabled="accessDisabled">
            <option disabled></option>

        </select>


 <input type="checkbox" /> 

Answer 1

你必须包装你的元素，angularjs 每个视图需要一个根元素。

在你的情况下，你可以这样做：

<div class="mywrapper">
    <select
        id="teamUsers"
        data-placeholder="Select User"
        chosen=""
        class="chosen-select
        input-md"
        ng-options="user.EncryptedID as user.EmployeeName+' '+user.EmployeeLastName+', '+user.TeamName  for user in teamUsers"
        ng-disabled="accessDisabled"
    >
        <option disabled></option>
    </select>
    <input type="checkbox" />
</div>