Html AngularJS-document.getElementById（）-为什么元素返回null？

在我的HTML表单中单击AngularJS小部件中的按钮时打开的对话框上有一个复选框：

<form class="m-body" role="form" data-ng-submit="preview($event)" novalidate>
    ...
    <div data-ng-if="widget.name === 'display-box'" ng-dige="hideWidgetHeading()">
        <div class="divider"></div>
        <div class="row">
            ...
        </div>
        ...
        <div class="row ui-checkbox-row">
            <label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label>
            <div class="col-sm-8 col-xs-6">
                <label class="ui-checkbox">
                    <input type="checkbox" name="noWidgetHeading" ng-true-value= true ng-false-value= false ngChange="hideWidgetHeading()" ng-click="hideWidgetHeading()" >
                    <span></span>
                </label>
            </div>
        </div>
    </div>
    ...

当前，当我加载页面并单击按钮打开对话框时，该复选框将显示在未选中的对话框上。当我单击它时，它显示它已选中，如果我再次单击它，它将再次变为未选中，正如您所期望的那样

当按下对话框“提交”按钮时，我试图使用上面的

hidewidgethead（）

JS函数执行不同的操作，具体取决于是否选中了复选框

此时，如果我选中该复选框（即已选中-其值应为

true

），并单击表单上的“提交”按钮，我将在控制台中获得以下输出：

空的

复选框的值已更改：null

else中widgetHeadingCheckbox的值：null

如果在复选框未选中时单击submit按钮，我也会在控制台中获得相同的输出

为什么我的复选框的值总是

null

。。。我希望它是

true

或

false

，但绝不是

null

。。。我需要在什么地方初始化它吗？我以为我已经在HTML中这样做了，当设置它的

ng真值

&

ng假值

编辑

按照dcrux在回答中所说的，我已将显示复选框的对话框的HTML更改为：

<div data-ng-if="widget.name === 'umw-tag-box'" ng-hide="hideWidgetHeading">
    ...
    <div class="row ui-checkbox-row">
        <label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label>
        <div class="col-sm-8 col-xs-6">
            <label class="ui-checkbox">
                <input type="checkbox" ... ng-model="hideWidgetHeading">
                <span></span>
            </label>
        </div>
    </div>
</div>

...

当我单击小部件上的“设置”按钮时，对话框打开：

但是，当我选中“隐藏小部件标题”复选框时，它实际上隐藏的是对话框中的内容，而不是小部件中的内容：

我希望它隐藏的是小部件本身的标题栏，而不是对话框中的任何内容：

---

如何让它从小部件而不是对话框中隐藏某些内容？

在输入标记中使用

ng model

<input type="checkbox" name="noWidgetHeading" ng-true-value= true ng-false-value= false ngChange="hideWidgetHeading()" ng-model="noWidgetHeading" ng-click="hideWidgetHeading()" />

---

在输入标签中保留ng模型

ng model=“noWidgetHeading”

也不是从文件中读取

var widgetHeadingCheckbox = document.getElementById("noWidgetHeading");
    console.log(widgetHeadingCheckbox);

尝试从范围中读取

var widgetHeadingCheckbox = $scope.noWidgetHeading;
    console.log(widgetHeadingCheckbox)

---

只是建议你试着让我知道你想把ngChange换成ngChange。另外，线索在方法名getElementById（）中-缺少id，您有名称，但没有id。

我将首先将

ng model=“noWidgetHeading”

添加回输入

然后改变：

var widgetHeadingCheckbox = document.getElementById("noWidgetHeading");
 console.log(widgetHeadingCheckbox);

$scope.$watch('widgetHeadingCheckbox', function(){
    console.log("Value of checkbox has changed: ", widgetHeadingCheckbox);
});

只是：

$scope.$watch('noWidgetHeading', function(){
  console.log("Value of checkbox has changed: ", $scope.noWidgetHeading);
});

下一步：

在HTML上-输入不需要

ng真值

或

ng假值

，因为使用

'true'

和

'false'

是默认值。如果不想使用默认值，请确保使用的是表达式，以便：

ng true value=“'YES'”

确保指令的使用正确：

ngChange

应为

ng change

hideWidgetHeading（）

未暴露于作用域，因此无法从前端调用。考虑将其绑定到$范围：<代码> $Top.HiDeWeGeTeAd=函数（）{{}} /Calp>< /P>

---

查看这些更改是否解决了问题。

这是我最初的设置，但无法使其正常工作，因此删除了

ng模型

。。。我刚刚把它加了回去，但是我得到的输出和我在我的作品中提到的一样。你说的第二件要改变的事情肯定是不正确的？我已经获得了HTML元素

noWidgetHeading

并将其设置为AngularJS变量

widgetHeadingCheckbox

-所以肯定

widgetHeadingCheckbox

是我想要传递到

$watch（）

函数调用中的变量吗？我做了您建议的其他更改，但是我的

控制台.log（）中的大部分

语句仍然显示复选框的

null

或

未定义的
值……因为我们已将属性
ng model=“noWidgetHeading”
添加到输入中，所以观察模型比观察元素本身要好。在我看来，查看$scope是一种更好的方法，因为$scope.noWidgetHeading值是将要更改的内容，并且是双向绑定到控制器的内容。以下是plunker:点击f12查看操作感谢示例-这几乎正是我想要的。。。但是我想知道，我不能让它像您在示例中那样工作的原因是否是因为我试图隐藏的元素与复选框不在同一范围内。。。？我想隐藏的是小部件的“标题”。我尝试使用的复选框当前显示在一个对话框中，当您单击该小部件上的“设置”按钮时，该对话框会弹出。我更改了
ng模型
以反映您在示例中所使用的功能，虽然这增加了我想要的功能，但它添加到了错误的东西中。我给了它一个
id
，其值与其
名称
相同，但仍然存在相同的问题。。。
$scope.$watch('noWidgetHeading', function(){
  console.log("Value of checkbox has changed: ", $scope.noWidgetHeading);
});