javascript - bool 值并不反射(reflect)在 ng-model 的任何地方；使用 Batarang 进行验证并使用 Controller 作为

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> s 保持为空(实际上，我希望 p 标签中默认有一个与 ng-model 中的变量无关的值(例如 )。)。我检查了他们的类(class)，他们是 ng-pristine , ng-untouched和 ng-empty .

但是，<textarea>显示true/false值符合预期。

我没有在 DOM 中的任何地方使用 $scope，所以我认为这不是继承的问题。我还用 Batarang 检查了范围。

我在这里不知所措。

附注这是一个 fiddle :https://jsfiddle.net/6bud04er/

Answer 1

p 中没有文字标签，这就是它们不可见的原因。不要使用ng-model对于 p标签，这不是它的目的。 ngModel绑定(bind)input到模型 Controller 。如果您希望将该值添加到 <p>标签，使用 ng-bind 指令或使用 {{ expression }} Angular 的语法如下所示。

(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>