アングルディレクティブで大文字小文字は使用できますが、変数は設定されていません

私のフォームのフィールドの入力を大文字にするためのディレクティブを使用する際に問題があります。アングルディレクティブで大文字小文字は使用できますが、変数は設定されていません

ユーザーがフィールドとやりとりしたときに、そのトリックをうまくやる指示文を使用しています。私が持っている問題は、コントローラーから設定されているように、データが入ったときに指令が実行されないということです。フィールドに触れてフォーカスを去っても！ここで

はplunkerです：あなたはあなたがフィールドに入力して残せば、それは全部を大文字になることがわかります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" 
});

TEMPLATE

<!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>

。私はsetTouched（）を使用しようとしました。検証をトリガーするが、それはどちらも機能していない。

出典

2016-10-28 jenryb

あなたは、コントローラからのデータを大文字にしていないのはなぜ？ –

@JonathanAnctil実際には、私のアプリはクライアントが他の場所に入力したデータをインポートしています。私は彼らがインポートのために入れているものを制御することはできませんので、それが入って後にそれを処理しています。これは単なる例です。 – jenryb

ええ、インポートしたデータはコントローラを通過しなければならないので、出力を制御することができます。たぶん私は何かを誤解しました。 –

これまでの私の最も有望な解決策は、フィルタを使用することです。ここplunkerは次のとおりです。

コントローラで

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

アングルディレクティブで大文字小文字は使用できますが、変数は設定されていません

答えて

関連する問題