대문자 화는 흐릿하게 작동하지만 각도 명령에서 변수를 설정하지 않습니다

양식의 입력란에 대문자를 입력하는 데는 지시문을 사용하는 데 문제가 있습니다.대문자 화는 흐릿하게 작동하지만 각도 명령에서 변수를 설정하지 않습니다

사용자가 필드와 상호 작용할 때 트릭을 잘 수행하는 지시문을 사용하고 있습니다. 내가 가진 문제는 컨트롤러에서 설정 한 것처럼 데이터가 들어 오면 지시문이 실행되지 않는다는 것입니다. 현장에 손을 대고 초점을 맞춘다 고해도! http://plnkr.co/edit/ugrurqAVraRqiJQmDZG7?p=preview

DIRECTIVE

var app = angular.module('plunker', []); 

    app.directive('capitalize', function() { 
    return { 
     require: 'ngModel', 
     link: function(scope, element, attrs, modelCtrl) { 
     var capitalize = function(inputValue) { 
      if (inputValue === undefined) inputValue = ''; 
      var capitalized = inputValue.toUpperCase(); 
      if (capitalized !== inputValue) { 
      modelCtrl.$setViewValue(capitalized); 
      modelCtrl.$render(); 
      } 
      return capitalized; 
     } 
     modelCtrl.$parsers.push(capitalize); 
     capitalize(scope[attrs.ngModel]); // capitalize initial value 
     } 
    }; 
    }); 

app.controller('MyCtrl', function($scope,$filter) { 
    $scope.second = "capitalizeme" 
});

템플릿

<!DOCTYPE html> 
<html ng-app="plunker"> 
    <head> 
    <script data-require="[email protected]" data-semver="1.5.0" src="https://code.angularjs.org/1.5.0/angular.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="MyCtrl"> 

    <div> 
     <label>Input 2</label> 
     <input capitalize type="text" ng-model-options="{ updateOn: 'blur' }" ng-model="second" />{{second}} 
    </div> 
    </body> 
</html>

당신은 당신이 필드에 입력하고 방치하면, 전체를 활용할 것을 볼 수 있습니다 여기에

는 plunker입니다. setTouched();를 사용하려고했습니다. 유효성 검사를 트리거하지만 그 중 하나가 작동하지 않습니다.

출처

2016-10-28 jenryb

이 왜 데이터가 컨트롤러에서 오는 대문자로하지 않습니다 여기에 plunker은? –

@JonathanAnctil 실제 상황에서 내 앱은 클라이언트가 다른 곳에 입력 한 데이터를 가져오고 있습니다. 수입을 위해 투입 한 내용을 통제 할 수 없으므로 수입 이후에 처리 할 것입니다. 이는 단지 예일뿐입니다. – jenryb

그래도 가져온 데이터는 컨트롤러를 통과해야하므로 출력을 제어 할 수 있습니다. 어쩌면 내가 뭔가를 오해했을 수도 있습니다. –

지금까지 가장 유망한 해결책은 필터를 사용하는 것입니다. 템플릿에서

컨트롤러에서

http://plnkr.co/edit/Y9VaxGFjHfun9e6uIrtZ?p=preview

var app = angular.module('plunker', []); 
    app.controller('MyCtrl', function($scope,$filter) { 
     $scope.second = "capitalizeme"; 

     $scope.$watch('second', function (val) { 
        $scope.second = $filter('uppercase')(val); 
       }, true); 
    });

가 :

<!DOCTYPE html> 
<html ng-app="plunker"> 
    <head> 
    <script data-require="[email protected]" data-semver="1.5.0" src="https://code.angularjs.org/1.5.0/angular.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="MyCtrl"> 

    <div> 
     <label>Input 2</label> 
     <input type="text" ng-model-options="{ updateOn: 'blur' }" ng-model="second" />{{second}} 
    </div> 
    </body>

출처

2016-10-28 20:16:35 jenryb

대문자 화는 흐릿하게 작동하지만 각도 명령에서 변수를 설정하지 않습니다

답변

관련 문제