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

tl;博士；

使用bookPrice = input("What is the cost of your book? >> ") while bookPrice.isnumeric() is False or float(bookPrice) < 0: bookPrice = input("Use whole # or decimal, no spaces: >> ") bookPrice = float(bookPrice) print("Your book price is ${0:<.2f}.".format(bookPrice))

将自定义指令与ngModel.$setViewValue指令结合使用时，该指令应使用ng-model API：

ngModelController

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);
        }

有关更多信息，请参见

AngularJS ngModelController API Reference

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
}

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

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

2 个答案: