簡體   English   中英

為angularjs指令創建自定義驗證器時出現問題

[英]Problem creating custom validator for an angularjs directive

所以我有一個自定義指令,它可以正常工作。 該指令正在多個地方使用。 這是一個元素指令。

此元素指令具有某些屬性。 我只為該指令的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-model,如何在鏈接功能中訪問?
如果我寫錯了,請隨意糾正我。 我還在學習AngularJS

你應該使用這樣的指令:

directive('attributeTypes', [function() {
  return {
    require: '?ngModel', // get a hold of NgModelController
    link: function(scope, element, attrs, ngModel) {
      ...
      ngModel.$setValidity(...

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM