angularjs - update - angular set page title from controller




Angular-Fehler: $ rootScope: infdig, wenn ein directory-Attribut mit einer Controller-Variablen gesetzt wird (2)

Ich habe eine Direktive, die verhindert, dass bestimmte Werte in eine Eingabe eingegeben werden. Zum Beispiel das ...

<input type="number" name="testValue" ng-model="testValue" 
    block="[0, 10, 17]" />

... gibt einen Validierungsfehler, wenn der Benutzer 0, 10 oder 17 eingibt.

Das funktioniert gut, aber jetzt muss ich die blockierten Werte abhängig von einer Variablen in meinem Controller bedingt setzen, also habe ich versucht, einen Ternär zu verwenden, um den Wert einzustellen, so ...

<input type="number" name="testValue" ng-model="testValue" 
    block="blockValues ? [0, 10, 17] : []" />

Allerdings verursacht dies einen Fehler: $ rootScope: infdig Infinite $ Digest Loop , und ich verstehe nicht warum. Kann mir bitte jemand diesen Fehler erklären und was kann ich tun, um ihn zu beheben? Oder irgendeine Alternative würde auch geschätzt werden. Vielen Dank!

Hier ist ein Code-Snippet, um Folgendes zu demonstrieren:

var myApp = angular.module("myApp", []); 
myApp.controller("myCtrl", function($scope) {
    $scope.blockValues = true;
    $scope.testValue = '';
});


myApp.directive('block', function() {
        'use strict';
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                block: '='
            },
            link: function(scope, element, attrs, ngModel) {
                ngModel.$validators.allowedValues = function (value) {
                    return !scope.block || scope.block.indexOf(value) === -1;
                };
            }
        };
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <form name="myForm">
      <!-- Errors -->
      <input type="number" name="testValue" ng-model="testValue"
        block="blockValues ? [0] : []" />

      <!-- No Errors
      <input type="number" name="testValue" ng-model="testValue"
        block="false ? [0] : []" />
      -->
      <!-- No Errors
      <input type="number" name="testValue" ng-model="testValue"
        block="true ? [0] : []" />
      -->
      <!-- No Errors
      <input type="number" name="testValue" ng-model="testValue"
        block="[0]" />
       -->
       <!-- No Errors
      <input type="number" name="testValue" ng-model="testValue"
        ng-min="blockValues ? 1 : 0" />
       -->      
    </form>
    <div>{{myForm.testValue.$error}}</div>
</div>


Ein häufiger Fehler ist die Bindung an eine Funktion, die bei jedem Aufruf ein neues Array generiert. In diesem Fall wird jedes Mal ein neues Array [0] generiert, was zu einem unendlichen Digest-Fehler führt.

  <!-- Infinite Digest Errors
  <input type="number" name="testValue" ng-model="testValue"
    block="blockValues ? [0] : []" />
  -->

Da AngularJS ein neues Array zurückgibt, stellt es fest, dass das Modell in jedem $digest Zyklus unterschiedlich ist, was zu dem Fehler führt. Die Lösung besteht darin, dasselbe Array-Objekt zurückzugeben, wenn sich die Elemente nicht geändert haben:

  <!-- FIXED -->
  <input type="number" name="testValue" ng-model="testValue"
    ng-init="a1=[0];a0=[]" block="blockValues ? a1 : a0" />

Weitere Informationen finden Sie unter AngularJS-Fehlerreferenz - $ rootScope / infdig

Die Demo

var myApp = angular.module("myApp", []); 
myApp.controller("myCtrl", function($scope) {
    $scope.blockValues = true;
    $scope.testValue = '';
});


myApp.directive('block', function() {
        'use strict';
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                block: '='
            },
            link: function(scope, element, attrs, ngModel) {
                ngModel.$validators.allowedValues = function (value) {
                    return !scope.block || scope.block.indexOf(value) === -1;
                };
            }
        };
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <form name="myForm">
      <!-- Infinite Digest Errors
      <input type="number" name="testValue" ng-model="testValue"
        block="blockValues ? [0] : []" />
      -->

      <!-- FIXED -->
      <input type="number" name="testValue" ng-model="testValue"
        ng-init="a1=[0];a0=[]" block="blockValues ? a1 : a0" />
      
    </form>
    <div>{{myForm.testValue.$error}}</div>
</div>






angularjs-scope