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.

        }
        }
    };
}]);

userlist.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>

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

1 个答案: