Boolescher Wert spiegelt nicht überall mit ng-Modell wider; verifiziert mit Batarang und mit Controller-als

Question

Ich versuche, Beobachter zu verstehen, aber ich bin auf ein bisschen ein seltsames Problem gestoßen.

Ich habe Code wie folgt aus:

HTML

<div ng-app='dummyApp'> 
    <div ng-controller="SampleController as sample"> 
    <input type="checkbox" ng-model="sample.toggleValue" /> 
    <p ng-model="sample.toggleValue"></p> 
    <textarea ng-model = "sample.toggleValue"></textarea> 
    <p ng-model="sample.text"></p> 
    </div> 
</div> 

JS

(function() { 
    angular.module('dummyApp', []); 
    angular.module('dummyApp') 
     .controller('SampleController', SampleController); 

    function SampleController($scope) { 
     var vm = this; 

     vm.text = ""; 


     $scope.$watch('sample.toggleValue', function(newVal, oldVal) { 

      console.log({newval: newVal, old: oldVal}); 
      vm.text = vm.text + ";"; 
     }); 

    } 
})(); 

Die console.log ordnungsgemäß funktioniert, und zeigt die Werte, wie sie in der Konsole geändert werden . Aber weder der Wert von toggleValue noch der Wert von text zeigen sich im Browser; sowohl die <p> s bleiben leer (Eigentlich möchte ich Wert standardmäßig haben in den p-Tags, die nicht auf die Variable im ng-Modell (wie <unbekannt> verwandt ist).). Ich habe ihre Klassen überprüft, und sie sind ng-pristine, ng-untouched und ng-empty.

Die <textarea> zeigt jedoch den true/false Wert wie erwartet.

Ich verwende $ scope nirgendwo im DOM, also glaube ich nicht, dass dies ein Problem mit der Vererbung ist. Ich habe auch den Anwendungsbereich mit Batarang überprüft.

Ich bin hier ratlos.

P.S. Hier ist eine Geige: https://jsfiddle.net/6bud04er/

Answer 1

Es gibt keinen Text in den Tags, das ist der Grund, dass sie nicht sichtbar sind. Verwenden Sie nicht ng-model für Tags, das ist nicht der Zweck davon. ngModel bindet einen input an den ModelController. Wenn Sie den Wert wollen <p> Tags hinzugefügt werden, verwenden ng-bind Richtlinie oder {{ expression }} Syntax von Winkel verwenden, wie unten dargestellt.

(function() { 
 
    angular.module('dummyApp', []); 
 
    angular.module('dummyApp') 
 
     .controller('SampleController', SampleController); 
 

 
    function SampleController($scope) { 
 
     var vm = this; 
 

 
     vm.text = ""; 
 

 
     $scope.default = "default string"; 
 
     $scope.$watch('sample.toggleValue', function(newVal, oldVal) { 
 

 
      console.log({newval: newVal, old: oldVal}); 
 
      //vm.text += vm.text + ";"; 
 
     }); 
 

 
    } 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app='dummyApp'> 
 
    <div ng-controller="SampleController as sample"> 
 
    <input type="checkbox" ng-model="sample.toggleValue" /> 
 
    <textarea ng-model = "sample.text"></textarea> 
 
    <p ng-hide="sample.toggleValue">toggle is false</p> 
 
    <p>{{default}}</p> 
 
    </div> 
 
</div>

Answer 2

Um ng-Modell in einem boolean Wert zu zeigen p Tag einfach entfernen und <p>{{ sample.toggleValue }}</p>