Как установить переменную ng-model из пользовательской директивы валидации

Question

Как вызвать область действия контроллера из директивы angularjs вне функции связывания

$scope здесь неизвестный провайдер:

app.directive('checkId', function($parse,$scope, $http){//here $scope is unknown provider
return{
    restrict:'A',
    link: function(scope, element, attrs){
        element.bind('change', function(){
            var filteredLength = $parse(attrs.filtered)(scope);
            console.log(filteredLength);
            var newFilteredArray =  scope.stateList.filter(function(values){
                return values.toUpperCase() == scope.TRDetail.memberNo.toUpperCase();
            });
            if(filteredLength == 0){
                console.log("if called");
                scope.TRDetail.memberNo = "";
            }else if(newFilteredArray.length == 0){
                scope.TRDetail.memberNo = "";
            };
                scope.$apply();
                thisIsCalled(scope.TRDetail.memberNo);
        });
    }
};

function thisIsCalled(someData){
    if(someData == ""){
        alert("NOT doing some $http srvices");
    }else{
            $http.post("SomeURL", someData).then(function(response, error){
                if(error){
                    alert("sorry no data found" + error.message);
                }else{
                    $scope.TRDetail.memberName = response.data;
                }
        }); 
    };
};
});

HTML:

<div class="form-group col-md-3">
      <label>MemberShip NO:<span ng-if="(stateList|filter:TRDetail.memberNo).length==0" style="color:red;">(nothing found)</span></label>
      <input list="idList" class="form-control" name="browser"
             ng-model="TRDetail.memberNo"
             filtered="(stateList|filter:TRDetail.memberNo).length"
             check-id>
      <datalist id="idList">
        <option ng-repeat="x in stateList">{{x}}</option>
      </datalist>  
    </div>
    <div class="form-group col-md-9">
      <label>Member Name</label>
      <input type="text" ng-disabled="true" 
             ng-model="TRDetail.memberName" class="form-control"
             placeholder="type name here..">
    </div>

Я не могу обновить TRDetail.memberName вне функции связи. любая помощь, как это сделать?

Answer 1

ТЛ; доктор;

Использование ngModel.$setViewValue

---

Когда пользовательская директива объединяется с директивой ng-model, директива должна использовать ngModelController API:

app.directive('checkId', function($parse,$http){
return{
    require: 'ngModel',
    restrict:'A',
    link: function(scope, element, attrs, ngModel){
        ̶e̶l̶e̶m̶e̶n̶t̶.̶b̶i̶n̶d̶(̶'̶c̶h̶a̶n̶g̶e̶'̶,̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶)̶{̶
        ngModel.$viewChangeListeners.push(onChange);
        function onChange(){
            if (!ngModel.$modelValue) return;
            var filteredLength = $parse(attrs.filtered)(scope);
            console.log(filteredLength);
            var newFilteredArray =  scope.stateList.filter(function(values){
                ̶r̶e̶t̶u̶r̶n̶ ̶v̶a̶l̶u̶e̶s̶.̶t̶o̶U̶p̶p̶e̶r̶C̶a̶s̶e̶(̶)̶ ̶=̶=̶ ̶s̶c̶o̶p̶e̶.̶T̶R̶D̶e̶t̶a̶i̶l̶.̶m̶e̶m̶b̶e̶r̶N̶o̶.̶t̶o̶U̶p̶p̶e̶r̶C̶a̶s̶e̶(̶)̶;̶
                return values.toUpperCase() == ngModel.$modelValue.toUpperCase();
            });
            if(filteredLength == 0){
                console.log("if called");
                ̶s̶c̶o̶p̶e̶.̶T̶R̶D̶e̶t̶a̶i̶l̶.̶m̶e̶m̶b̶e̶r̶N̶o̶ ̶=̶ ̶"̶"̶;̶
                ngModel.$setViewValue("");
            }else if(newFilteredArray.length == 0){
                ̶s̶c̶o̶p̶e̶.̶T̶R̶D̶e̶t̶a̶i̶l̶.̶m̶e̶m̶b̶e̶r̶N̶o̶ ̶=̶ ̶"̶"̶;̶
                ngModel.$setViewValue("");
            };
            ̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶
            ̶t̶h̶i̶s̶I̶s̶C̶a̶l̶l̶e̶d̶(̶s̶c̶o̶p̶e̶.̶T̶R̶D̶e̶t̶a̶i̶l̶.̶m̶e̶m̶b̶e̶r̶N̶o̶)̶;̶
            thisIsCalled(ngModel.$modelValue);
        }

        function thisIsCalled(someData){
            if(someData == ""){
                alert("NOT doing some $http srvices");
            }else{
                $http.post("SomeURL", someData)
                  .then(function(response){
                     ngModel.$setViewValue(response.data);
                })
                  .catch(function(error) {
                     alert("sorry no data found" + error.status);
                }); 
            };
        }
    }
};

Для получения дополнительной информации см.

• Справочник по AngularJS ngModelController API

Answer 2

Ваша функция thisIsCalled(someData) просто не живет внутри вашего углового приложения. Вы должны получить доступ к элементу $ scope через контроллер директивы:

angular.directive('checkId', function($parse, $scope, $http) {
    return {
        restrict: 'A',
        link: //your link stuff
        controller: myController
    };
});

function myController($scope) {
    //here you can access the scope
}