How to set ng-model variable from custom validation directive

Question

How to call controller scope from angularjs directive outside link function

$scope is unknown provider here:

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>

I am unable to update TRDetail.memberName outside from link function. any help, how to do?

@georgeawg, I want to pass a variable from link function using `thisIsCalled`; then this function will update parent scope in html. — mahipal singh, Jun 28 '18 at 13:41
@GuillaumeGeorges the proposed duplicate does not apply in this case. — georgeawg, Jun 29 '18 at 16:29

georgeawg · Accepted Answer · 2018-06-28T15:25:10.930

tl; dr;

Use ngModel.$setViewValue

When a custom directive is combined with ng-model directive, the directive should use the 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);
                }); 
            };
        }
    }
};

For more information, see

AngularJS ngModelController API Reference

score -1 · Answer 2 · answered Jun 28 '18 at 12:03

-1

Your function thisIsCalled(someData) is just not living inside your angular app. You should get access to the $scope element through the directive's controller:

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
}

answered Jun 28 '18 at 12:03

Bastián Díaz Olave

52
5

replace `myController` by `thisIsCalled` as you prefer – Bastián Díaz Olave Jun 28 '18 at 12:09
still i am unable to call function with passing some variable and update main controller scope because one variable will be passed from link function `thisIscalled` fuction and will update parent scope. – mahipal singh Jun 28 '18 at 13:39

How to set ng-model variable from custom validation directive

How to call controller scope from angularjs directive outside link function

2 Answers2