Angular指令編譯：「RangeError：超出最大調用堆棧大小」

我想通過自定義指令將「ng-pattern」指令添加到輸入元素。我不想直接在模板中執行它，但看起來我陷入了無限循環。Angular指令編譯：「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

Angular指令編譯：「RangeError：超出最大調用堆棧大小」

回答

相關問題