為什么在ng-if中使用.match似乎會導致摘要回圈

考慮以下簡單的 angularjs 應用程式（此處為小提琴：https ://jsfiddle.net/jeconner/n3e61o0a/33/ ）：

<div ng-controller="MyCtrl">
  <div ng-if="showVal()">
    {{val}}
  </div>
</div>

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope, $interval) {
    $scope.val = 0;
    
    $interval(function () {
        $scope.val = Math.trunc(Math.random() * 200);
    }, 1000);
    
    $scope.showVal = function () {
        //return $scope.val % 2 == 0; // This works!
        return String($scope.val).match(/[1]{1}[0-9]{2}/); // Console errors!
    };
}

的值val設定為每秒更改一次。如果您取消注釋 中的第一個回傳行showVal，它將運行而不會出錯，顯示val它何時是偶數。

但是，如果您轉換val為字串并針對上述正則運算式進行測驗，則會出現控制臺錯誤，抱怨達到 10 個摘要周期：

<a class='gotoLine' href='#"Error: [$rootScope:infdig'>"Error: [$rootScope:infdig</a> 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: <a class='gotoLine' href='#[\&quot;showVal(); newVal: [\\&quot;176\\&quot;]; oldVal: [\\&quot;176\\&quot;]\&quot;],[\&quot;showVal(); newVal: [\\&quot;176\\&quot;]; oldVal: [\\&quot;176\\&quot;]\&quot;],[\&quot;showVal(); newVal: [\\&quot;176\\&quot;]; oldVal: [\\&quot;176\\&quot;]\&quot;],[\&quot;showVal(); newVal: [\\&quot;176\\&quot;]; oldVal: [\\&quot;176\\&quot;]\&quot;],[\&quot;showVal(); newVal: [\\&quot;176\\&quot;]; oldVal: [\\&quot;176\\&quot;]\&quot;]'>[\&quot;showVal(); newVal: [\\&quot;176\\&quot;]; oldVal: [\\&quot;176\\&quot;]\&quot;],[\&quot;showVal(); newVal: [\\&quot;176\\&quot;]; oldVal: [\\&quot;176\\&quot;]\&quot;],[\&quot;showVal(); newVal: [\\&quot;176\\&quot;]; oldVal: [\\&quot;176\\&quot;]\&quot;],[\&quot;showVal(); newVal: [\\&quot;176\\&quot;]; oldVal: [\\&quot;176\\&quot;]\&quot;],[\&quot;showVal(); newVal: [\\&quot;176\\&quot;]; oldVal: [\\&quot;176\\&quot;]\&quot;]</a>
http://errors.angularjs.org/1.2.1/$rootScope/infdig?p0=10&amp;p1=[["showVal(); newVal: [\"176\"]; oldVal: [\"176\"]"],["showVal(); newVal: [\"176\"]; oldVal: [\"176\"]"],["showVal(); newVal: [\"176\"]; oldVal: [\"176\"]"],["showVal(); newVal: [\"176\"]; oldVal: [\"176\"]"],["showVal(); newVal: [\"176\"]; oldVal: [\"176\"]"]]
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:78:12
    at Scope.$digest (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:11472:19)
    at Scope.$apply (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:11682:24)
    at tick (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:8189:36)"]
"Script error."

為什么會出現這個錯誤？是否有適當的方法在 ng-if 中使用正則運算式來避免此錯誤？

uj5u.com熱心網友回復：

我盡量不具備我的 ng-show 或 ng-if 的功能。他們被不停地打電話，通常是不必要的。我發現使用幕后設定的布林值在記憶體和性能方面要容易得多。例如，在您的代碼中，它每秒設定$scope.val一次，但在摘要期間可能會多次運行 showVal() 函式。考慮這個替代方案，我在小提琴中進行了測驗，沒有錯誤：

<div ng-controller="MyCtrl">
  <div ng-if="showValBool">
    {{val}}
  </div>
</div>
var myApp = angular.module('myApp',[]);

function MyCtrl($scope, $interval) {
    $scope.val = 0;
    $scope.showValBool = false
    $interval(function () {
        $scope.val = Math.trunc(Math.random() * 200);
        $scope.showValBool = String($scope.val).match(/[1]{1}[0-9]{2}/);
    }, 1000);
    
} 

標籤：angularjs

上一篇：將個人資料圖片從react前端發送到flask-restful后端并存盤

下一篇：使用jquery洗掉iframe中的某些元素