Html 如何使用angularJS中md select的自定义指令模板在md select中实现所需的有效性？

我正在使用自定义指令为md select设置自定义模板，但表单有效性和必需的有效性不起作用。这是用于使用自定义指令作为md custom select重构md select模板的

我已经在自定义指令传递模型和下拉列表中创建了md select模板，还需要attr。这个自定义指令的主要问题是，它不能有效地显示表单

我正在转换：

    <md-select  required ng-model="vm.Search.ParentDivisionID" ng-change="vm.GetDivisionIDList()">
                                            <md-option ng-value="item.ID" ng-repeat="item in vm.ParentDivisionList">
                                                {{item.Name}}
                                            </md-option>
                                        </md-select>

{{item.Name}

致：

（功能（）{
"严格使用",；
window.app.directive（'mdCustomSelect'，mdCustomSelect'）；
mdCustomSelect.$inject=['$compile']；
函数mdCustomSelect（$compile）{
var styleTemplate=”\
md复选框#复选框{\
保证金：16px 0px 10px 5px\
}\
md复选框#checkAllBox.md标签{\
页边距底部：0px！重要\
}\
md复选框#checkAllBox.md标签范围{\
左边距：3倍！重要\
}\
md复选框#checkAllBox.md图标{\
高度：20px！重要\
宽度：20px！重要\
}\
.parentLabel.parentLabel标签{\
边框底部：1px实心#ccc\
颜色：#000\
垫底：6px\
}\
md复选框#checkAllBox:未（[禁用]）.md-warn.md-checked.md图标{\
背景色：rgb（88104191）！重要\
}\
md复选框#checkAllBox.md-checked.md图标：之后{\
高度：13px！重要\
左：5px！重要\
}\
.parentLabel.md容器忽略{\
填充：0px\
边际：0px\
边界：无\
}\
";
var selectAllTemplate='0\
选中/取消选中全部\
';
函数搜索模板（占位符）{
如果（占位符==未定义的| |占位符==“”）占位符=“搜索…”；
返回'\
\
';
}
函数getOptionTemplate（isMultiple，isGroup）{
var optionTemplate='{{subItem.ItemName}}'；
if（isGroup==false）{
返回（isMultiple？selectAllTemplate:“”）+optionTemplate；
}
返回（isMultiple？selectAllTemplate:“”）+\
\
{{item.ItemName}\
'
+optionTemplate+
'';
}
函数GetMDSelectOptions模板（$scope）{
var returnTemplate=$scope.isMultipleSelected？'multiple'：''；
returnTemplate+='ng required=“isRequired”'；
returnTemplate+=“ng-disabled=”isDisabled“；
返回模板；
}
var linker=函数（$scope、element、attrs、controllers）{
//https://github.com/angular/angular/issues/10094 绑定required属性始终应用所需的验证器
属性中的$scope.isMultipleSelected=“multiple”（attrs.multiple==“false”？false:true）：false；
attrs中的$scope.isGroup=“group”（attrs.group==“false”？false:true）：false；
$scope.ngModelCtrl=controllers.ngModelCtrl；
var ngModelName=attrs.ngModel；
var completeTemplate=“”；
completeTemplate+=样式模板；
//1开始
completeTemplate+=''；
completeTemplate+=searchTemplate（attrs.placeholder）；//2开始和结束
completeTemplate+=getOptionTemplate（$scope.isMultipleSelected，$scope.isGroup）；//3开始和结束
completeTemplate+=''；//1结束
html（completeTemplate）；
$compile（element.contents（））（$scope）；
};
返回{
限制：“E”，
要求：{
ngModelCtrl:“^ngModel”
},
作用域：{//还使用multiple和group属性
列表：“=”，
ngModel：“没有实际看到它的启动和运行，但是将它与我自己的一个uibTypeahead包装进行比较，我认为主要问题是作用域。ngModel是
，没有实际看到它的启动和运行，但是将它与我自己的一个uibTypeahead包装进行比较，我认为主要问题是作用域。ngModel是


     (function () {
        'use strict';
        window.app.directive('mdCustomSelect', mdCustomSelect);
        mdCustomSelect.$inject = ['$compile'];
        function mdCustomSelect($compile) {
            var styleTemplate = "<style>\
            md-checkbox#checkAllBox{\
                margin: 16px 0px 10px 5px;\
            }\
            md-checkbox#checkAllBox .md-label {\
                margin-bottom: 0px !important;\
            }\
            md-checkbox#checkAllBox .md-label span {\
                margin-left: 3px !important;\
            }\
            md-checkbox#checkAllBox .md-icon {\
                height: 20px !important;\
                width: 20px !important;\
            }\
            .parentLabel .parentLabel label {\
                border-bottom: 1px solid #ccc;\
                color: #000;\
                padding-bottom: 6px;\
            }\
            md-checkbox#checkAllBox:not([disabled]).md-warn.md-checked .md-icon {\
                background-color: rgb(88, 104, 191) !important;\
            }\
            md-checkbox#checkAllBox.md-checked .md-icon:after {\
                height: 13px !important;\
                left: 5px !important;\
            }\
            .parentLabel .md-container-ignore {\
                padding: 0px;\
                margin: 0px;\
                border:none;\
            }\
            </style>";

            var selectAllTemplate = '<div style="padding: 0px 0px 15px 5px; background-color: #efefef; border-bottom: 1px solid #ccc;">\
                <md-checkbox aria-label="Parent Checkbox" class="md-warn" id="checkAllBox" title="Select All" ng-model="checkAllChecked" ng-change="toggleSelectAll()">Check/Uncheck All </md-checkbox>\
            </div>';
            function searchTemplate(placeholder) {
                if (placeholder == undefined || placeholder == "") placeholder = "Search ...";
                return '<md-select-header aria-label="Select Header" class="demo-select-header">\
                <input aria-label="InputSearchBox" ng-keydown="$event.stopPropagation()" ng-model="searchTerm" type="search" placeholder="' + placeholder + '"\
                       class="demo-header-searchbox md-text">\
            </md-select-header>';
            }
            function getOptionTemplate(isMultiple, isGroup) {
                var optionTemplate = '<md-option aria-label="Dropdown Selector" ng-value="subItem.ItemID" ng-repeat="subItem in ' + (isGroup ? 'item.SubItems' : 'ItemList') + ' | filter: searchTerm">{{subItem.ItemName}}</md-option>';
                if (isGroup == false) {
                    return (isMultiple ? selectAllTemplate : '') + optionTemplate;
                }
                return (isMultiple ? selectAllTemplate : '') + '<md-optgroup aria-label="Dropdown Selector" class="parentLabel" ng-repeat="item in ItemList">\
                    <div ' + (isMultiple ? 'ng-click="item.toggleSelect() "' : '') + 'style="padding:10px 10px 10px 10px; font-size:1.4em; color:black; border-bottom: 1px solid #ccc;">\
                        {{item.ItemName}}\
                    </div>'
                    + optionTemplate +
                '</md-optgroup>';
            }
            function getMdSelectOptionsTemplate($scope) {
                var returnTemplate = $scope.isMultipleSelected ? 'multiple ' : '';
                returnTemplate += 'ng-required="isRequired" ';
                returnTemplate +='ng-disabled="isDisabled" ';
                return returnTemplate;
            }
            var linker = function ($scope, element, attrs, controllers) {
                //https://github.com/angular/angular/issues/10094 Binding required attribute always applies the required validator
                $scope.isMultipleSelected = "multiple" in attrs ? (attrs.multiple == "false" ? false : true) : false;
                $scope.isGroup = "group" in attrs ? (attrs.group == "false" ? false : true) : false;
                $scope.ngModelCtrl = controllers.ngModelCtrl;
                var ngModelName = attrs.ngModel;

                var completeTemplate = "";
                completeTemplate += styleTemplate;
                //1 begin
                completeTemplate += '<md-select ' + getMdSelectOptionsTemplate($scope) + 'ng-model="ngModel" md-on-open="mdOpen()" md-on-close="mdClose()" ng-change="valChanged()" data-md-container-class="selectdemoSelectHeader" class="md-no-asterisk">';

                completeTemplate += searchTemplate(attrs.placeholder);//2 begin and end
                completeTemplate += getOptionTemplate($scope.isMultipleSelected, $scope.isGroup); // 3 begin and end
                completeTemplate += ' </md-select>';//1 end

                element.html(completeTemplate);
                $compile(element.contents())($scope);
            };

            return {
                restrict: "E",
                require: {
                    ngModelCtrl: '^ngModel'
                },
                scope: { // also uses multiple and group attribute
                    list: "=",
                    ngModel: "<",
                    mdOnClose: "&",
                    ngOption: "<",
                    mdChangeOnClose: "&", // event fire when selector is closes with changed value
                    isDisabled: "=ngDisabled",
                    isRequired: "=ngRequired",
                    placeholder: "@"
                },
                replace: true,
                link: linker, // link is called after controller
                controller: ['$scope', function ($scope) {
                    var defaultValueProperty = $scope.ngOption == undefined || $scope.ngOption.Value == undefined ? 'DivisionID' : $scope.ngOption.Value;
                    var defaultTextProperty = $scope.ngOption == undefined || $scope.ngOption.Text == undefined ? 'DivisionName' : $scope.ngOption.Text;
                    var defaultParentValueProperty = $scope.ngOption == undefined || $scope.ngOption.ParentValue == undefined ? 'ParentDivisionID' : $scope.ngOption.ParentValue;
                    var defaultParentTextProperty = $scope.ngOption == undefined || $scope.ngOption.ParentText == undefined ? 'ParentDivisionName' : $scope.ngOption.ParentText;

                    $scope.ItemList = [];
                    var rawItemList;
                    $scope.$watch('list', function (newValue, OldValue) {
                        formatListForView(newValue);
                    }, true);
                    $scope.toggleSelectAll = function () {
                        valueChanged = true;
                        if ($scope.checkAllChecked == false) {
                            $scope.ngModelCtrl.$setViewValue([]);
                        } else {
                            $scope.ngModelCtrl.$setViewValue(rawItemList.map(function (item) { return item[defaultValueProperty]; }));
                        }
                    };

                    function formatListForView(rawList) {
                        rawList = rawList == null || rawList == undefined ? [] : rawList;
                        rawItemList = rawList;
                        var parentList = [];
                        var idList = [];
                        // if no grouping then just return the modified itemlist
                        if ($scope.isGroup == false) {
                            $scope.ItemList = rawList.map(function (subItem) {
                                return {
                                    ItemID: subItem[defaultValueProperty],
                                    ItemName: subItem[defaultTextProperty]
                                }
                            });
                            return; // below code is for grouping, not needed for group==false
                        }
                        // fill parent
                        rawList.forEach(function (item, index) {
                            if ((item[defaultParentValueProperty] != null || item[defaultParentValueProperty] != 0) && idList.indexOf(item[defaultParentValueProperty]) == -1) {
                                idList.push(item[defaultParentValueProperty]);
                                parentList.push({
                                    ItemID: item[defaultParentValueProperty],
                                    ItemName: item[defaultParentTextProperty]
                                });
                            }
                        });
                        // fill children
                        parentList.forEach(function (item, index) {
                            item.SubItems = rawList.filter(function (subitem) {
                                return subitem[defaultParentValueProperty] == item.ItemID;
                            }).map(function (subItem) {
                                return {
                                    ItemID: subItem[defaultValueProperty],
                                    ItemName: subItem[defaultTextProperty]
                                }
                            });
                            // toggle children from parent
                            item.toggleSelect = function () {
                                var valuesToToggle = item.SubItems.map(function (item) {
                                    return item.ItemID;
                                });
                                valueChanged = true;
                                var alreadySelected = _.intersection(valuesToToggle, $scope.ngModel);
                                if (alreadySelected.length == 0 || (alreadySelected.length > 0 && alreadySelected.length != valuesToToggle.length)) { // select all from the parent
                                    $scope.ngModelCtrl.$setViewValue(_.union(valuesToToggle, $scope.ngModel));
                                } else { // select none from the parent
                                    $scope.ngModelCtrl.$setViewValue(_.difference($scope.ngModel, valuesToToggle));
                                }
                            }
                        });
                        $scope.ItemList = parentList;
                    }
                    var valueChanged = false; // check if value changed for ngChangeOnClose
                    $scope.valChanged = function () {
                        valueChanged = true;
                        // for ng-change
                        $scope.ngModelCtrl.$setViewValue($scope.ngModel);
                    }
                    $scope.mdOpen = function () {
                        valueChanged = false;
                    }
                    $scope.mdClose = function () {
                        if (typeof $scope.mdOnClose === 'function') $scope.mdOnClose();
                        if (valueChanged) {
                            if (typeof $scope.mdChangeOnClose === 'function') $scope.mdChangeOnClose();
                        }
                    }
                }]
            }
        }
    })();