Template for directive 'selectUser' must have exactly one root element

Question

i am using a directive select-user in multiple places , and its all working fine. but the issue when i add a new html element place in directive html template.neither work in if i am using in div element.

always error return "Template for directive 'selectUser' must have exactly one root element"

i have to add a checkbox and change the want to change data source based on check box value.

directive calling in this way

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

i have a directive code in js file

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>

-- Error 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" />

Well, that new HTML has two root elements (``)... Wrap them in another element, like a `` or a ``... — Heretic Monkey, Aug 08 '18 at 12:18

score 0 · Answer 1 · answered Aug 08 '18 at 12:27

0

You have to wrap your elements, angularjs requires one root element per view.

In your case you can do something like this :

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

answered Aug 08 '18 at 12:27

la3roug

186
1
7

thanks for the answer. but already tries that,,i am facing another erro Controller 'ngModel', required by directive 'ngOptions', can't be found! – muiz Aug 08 '18 at 12:35
This is another issue that you mention here, check this response it may help you https://stackoverflow.com/questions/21807834/controller-ngmodel-required-by-directive-cant-be-found – la3roug Aug 09 '18 at 12:26

Template for directive 'selectUser' must have exactly one root element

1 Answers1