Проблема создания собственного валидатора для директивы angularjs - PullRequest
0 голосов
/ 29 марта 2019

Так что у меня есть пользовательская директива, которая работает нормально, как есть. Эта директива используется в нескольких местах. Это директива элемента.

Эта директива элемента имеет определенные атрибуты. Я добавил пользовательский атрибут только для 1 экземпляра этой директивы, т. Е. Только при 1 конкретном использовании этой директивы. Я добавил дополнительный атрибут для этого элемента.

Вот директива, используемая в HTML:

<attribute-types target-model="patient" attribute="::attribute"
                 field-validation="::fieldValidation"
                 is-auto-complete="isAutoComplete"
                 get-auto-complete-list="getAutoCompleteList"
                 get-data-results="getDataResults" is-read-only="isReadOnly"
                 handle-update="handleUpdate" validate-autocomplete="true">
</attribute-types>

validate-autocomplete - это дополнительный атрибут, который я использовал в 1 месте использования этой директивы.

Вот шаблон для директивы:

    <div class="left" data-ng-switch-when="org.openmrs.Concept" ng-if="attribute.name == 'PATIENT_OCCUPATION'" style="position: absolute">
    <input type="text"
           class="ui-autocomplete-input"
           id="{{::attribute.name}}"
           name="{{::attribute.name}}"
           ng-model="targetModel[attribute.name].value"
           ng-keyup="suggest(targetModel[attribute.name])"
           ng-required="{{::attribute.required}}">
    <ul class="ui-front ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" ng-if="showTag" ng-hide="hideList"
        style="position:absolute; top:30px;  width:192px">
        <li class="ui-menu-item" role="presentation" ng-repeat="info in filterOcuppation"
            ng-click="hideSuggestions(info)">
            <a class="ui-corner-all" tabindex="-1">{{info.description}}</a>
        </li>
    </ul>
</div>

И это определение директивы:

angular.module('bahmni.common.attributeTypes', [])
.directive('attributeTypes', [function () {
    var link = function (scope, element, attrs, ngModelCtrl) {
        var formElement = element[0];
        if (attrs.validateAutocomplete) {
            ngModelCtrl.$setValidity('selection', true);
        }
    };
    return {
        link: link,
        scope: {
            targetModel: '=',
            attribute: '=',
            fieldValidation: '=',
            isAutoComplete: '&',
            handleLocationChange: '&',
            handleSectorChange: '&',
            getAutoCompleteList: '&',
            getDataResults: '&',
            handleUpdate: '&',
            isReadOnly: '&',
            isForm: '=?'
        },
        templateUrl: '../common/attributeTypes/views/attributeInformation.html',
        restrict: 'E',
        controller: function ($scope) {
            var dateUtil = Bahmni.Common.Util.DateUtil;
            $scope.getAutoCompleteList = $scope.getAutoCompleteList();
            $scope.getDataResults = $scope.getDataResults();
            $scope.today = dateUtil.getDateWithoutTime(dateUtil.now());
            // to avoid watchers in one way binding
            $scope.isAutoComplete = $scope.isAutoComplete() || function () { return false; };
            $scope.isReadOnly = $scope.isReadOnly() || function () { return false; };
            $scope.handleUpdate = $scope.handleUpdate() || function () { return false; };
            $scope.handleLocationChange = $scope.handleLocationChange() || function () { return false; };
            $scope.handleSectorChange = $scope.handleSectorChange() || function () { return false; };
            $scope.suggestions = $scope.attribute.answers;

            $scope.showTag = false;
            $scope.itisinvalid = true;

            $scope.appendConceptNameToModel = function (attribute) {
                var attributeValueConceptType = $scope.targetModel[attribute.name];
                var concept = _.find(attribute.answers, function (answer) {
                    return answer.conceptId === attributeValueConceptType.conceptUuid;
                });
                attributeValueConceptType.value = concept && concept.fullySpecifiedName;
            };

            $scope.suggest = function (string) {
                $scope.hideList = false;
                $scope.showTag = true;
                var output = [];
                angular.forEach($scope.suggestions, function (suggestion) {
                    if (suggestion.description.toLowerCase().indexOf(string.value.toLowerCase()) >= 0) {
                        output.push(suggestion);
                    }
                });
                $scope.filterOcuppation = output;
            };

            $scope.hideSuggestions = function (object) {
                $scope.targetModel[$scope.attribute.name] = object;
                $scope.targetModel[$scope.attribute.name].value = object.description;
                $scope.targetModel[$scope.attribute.name].conceptUuid = object.conceptId;
                $scope.hideList = true;
            };
        }
    };
}]);

При запуске я получаю TypeError: ngModelCtrl.$setValidity is not a function То, что я в основном делаю, проверяет, что введено во входной текст, верно или нет Для этого мне также понадобится ng-модель, как мне получить доступ к ней в моей функции ссылки?
Если я написал что-то не так, не стесняйтесь поправлять меня. Я все еще изучаю AngularJS

1 Ответ

0 голосов
/ 30 марта 2019

Вы должны использовать такую ​​директиву:

directive('attributeTypes', [function() {
  return {
    require: '?ngModel', // get a hold of NgModelController
    link: function(scope, element, attrs, ngModel) {
      ...
      ngModel.$setValidity(...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...