角型コンパイル： "RangeError：最大呼び出しスタックサイズを超えました"

カスタムディレクティブを使用して入力要素に 'ng-pattern'ディレクティブを追加します。私はテンプレートで直接それをやりたいとは思わないが、無限ループになっているようだ。角型コンパイル： "RangeError：最大呼び出しスタックサイズを超えました"

最初に 'html'を設定して（Angular compile in directive seems to go into infinite loop）の後に要素をコンパイルしようとしましたが、スコープは定義されていません。要素の内容を置き換えることに関連するかどうかはわかりません。

新しいスコープを作成する必要がありますか？私は何かを逃していますか？

ありがとうございます！

    var myHtml = iElem[0].outerHTML; 
        iElem.replaceWith(myHtml); 
        var compiledElement = $compile(iElem)(iElem.scope());

HTML：

<input type="text" ng-model="personal.testNumber_string" my-model="personal.testNumber" dot-to-comma>

指令：ここ

function dotToCommaConverter($compile) { 
    return { 
     require: 'ngModel', 
     restrict: 'A', 
     scope: { 
      myModel: '=' 
     }, 
     controllerAs: 'dot2Comma', 

     controller: function($scope) { 

      this.myModel = $scope.myModel; 
     }, 


     compile: function(tElem, tAttrs) { 

      return { 
       pre: function(scope, iElem, iAttrs) { 


       }, 
       post: function(scope, iElem, iAttrs, modelCtrl) { 

        iElem.attr('ng-pattern', '/^-?[0-9]+(?:\,[0-9]+)?$/'); 
        var compiledElement = $compile(iElem)(iElem.scope()); 
        iElem.replaceWith(compiledElement); 


        modelCtrl.$setViewValue(String(scope.dot2Comma.myModel).replace('.', ',')); 
        modelCtrl.$render(); 


        modelCtrl.$parsers.push(function(inputValue) { 

         var transformedInput = inputValue.replace(/[^0-9,.-]/g, ''); 
         transformedInput = transformedInput.replace('.', ','); 
         transformedInput = transformedInput.replace(' ', ''); 

         if (transformedInput !== inputValue) { 

          modelCtrl.$setViewValue(transformedInput); 
          modelCtrl.$render(); 
         } 

         if (!isNaN(Number(transformedInput.replace(',', '.')))) { 
          scope.myModel = Number(transformedInput.replace(',', '.')); 
         } else { 
          scope.myModel = undefined; 
         } 

         return transformedInput; 
        }); 
       } 
      }; 
     } 
    }; 
}

出典

2017-04-05 sr.u

は、テキストボックスにカンマとドットを置き換えるサンプルディレクティブです：

script.js

ここで

angular.module('app', []); 

angular.module('app') 
.controller('ExampleController', ['$scope', function($scope) { 
    $scope.my = { number: '123.456' }; 
}]); 

angular.module('app') 
.directive('dotToComma', function() { 
    return { 
    restrict: 'A', 
     link: function (scope, element, attrs) { 
      scope.$watch(attrs.ngModel, function (value) { 
       var newValue = value.replace('.', ','); 
       element.val(newValue); 
      }); 
     } 
    } 
});

index.htmlを

<html lang="en" ng-app="app"> 
<head> 
    <meta charset="utf-8"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
    <script src="script.js"></script> 
</head> 

<body> 
    <form ng-controller="ExampleController"> 

    <p>scope.my.number = {{my.number}}</p> 

    <label>In this textbox, dots will automatically be replaced with commas, even if you change its value :</label> 
    <input type="text" ng-model="my.number" dot-to-comma> 
</form> 
</body> 
</html>

plunkerです：https://plnkr.co/edit/X6Fi0tnjBXKKhbwH0o2q?p=preview

はそれが役に立てば幸い！

出典

2017-04-05 21:08:12

再度コンパイルする前にHtmlコンテンツから自分のディレクティブを削除する必要がありました。これが無限ループの原因です。

    iElem.removeAttr('dot-to-comma'); 
        iElem.attr('ng-pattern', '/^-?[0-9]+(?:\,[0-9]+)?$/'); 
        iElem.attr('ng-blur', 'dot2Comma.myBlurFunction()'); 

        var compiledElement = $compile(iElem)(scope); 
        iElem.replaceWith(compiledElement);

出典

2017-04-07 09:24:20

角型コンパイル： "RangeError：最大呼び出しスタックサイズを超えました"

答えて

関連する問題