ブール値はng-modelのどこにも反映されません。 Batarangと確認してコントローラを使用

Question

私はウォッチャーを理解しようとしていますが、私は奇妙な問題に遭遇しました。

私はこのようなコードを持っている：

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 + ";"; 
     }); 

    } 
})(); 

正しくconsole.log作品を、それらがコンソールで変更されたような値を示しています。しかし、toggleValueの値もtextの値もブラウザに表示されません。両方とも<p>は空のままです（実際には、ng-modelの変数に関係のないpタグにはデフォルトで値を設定したいとします（<は不明です>など）。私はクラスをチェックしました。彼らはng-pristine、ng-untouched、ng-emptyです。

ただし、<textarea>は、期待通りにtrue/falseの値を示します。

DOMのどこにでも$ scopeを使用していないので、これは継承の問題ではないと思います。 私はBatarangとの範囲もチェックしました。

私はここに迷っています。

P.S. https://jsfiddle.net/6bud04er/

Answer 1

pタグにはテキストが表示されていないため、表示されません。 pタグにはng-modelを使用しないでください。これはその目的ではありません。 ngModelはinputをModelControllerにバインドします。値を<p>タグに追加する場合は、ng-bindディレクティブを使用するか、{{ expression }}という角度の構文を以下のように使用します。

(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

だけPにタグをNG-モデルを削除し、<p>{{ sample.toggleValue }}</p>