如何从自定义验证指令设置 ng-model 变量

Question

如何从 link 函数外的 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>

我无法在 link 函数之外更新 TRDetail.memberName。有帮助，怎么办？

Answer 1

您的功能 thisIsCalled(someData) 不在您的 angular 应用中。您应该通过指令的控制器访问 $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
}

Answer 2

tl;博士；

使用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 Reference

如何从自定义验证指令设置 ng-model 变量

How to set ng-model variable from custom validation directive

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-model

如何从 link 函数外的 angularjs 指令调用控制器作用域