布尔值并不反映所有的ng模型；使用Batarang验证并使用控制器as。

Question

我试着理解观察者，但我遇到了一个奇怪的问题。

我有这样的代码：

<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模型中的变量无关的p标记中默认地有一个值(例如)。我检查过他们的类，他们是ng-pristine，ng-untouched和ng-empty。

但是，<textarea>显示的true/false值与预期的一样。

我在DOM中的任何地方都不使用$scope，所以我不认为这是继承的问题。我也和巴达朗一起检查过范围。

我在这里不知所措。

这里有一个小提琴：https://jsfiddle.net/6bud04er/

Answer 1

p标记中没有文本，这就是它们不可见的原因。不要将吴模型用于p标记，这不是它的目的。ngModel将input绑定到ModelController。如果要将值添加到<p>标记中，请使用吴-绑定指令或使用角的{{ 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>。