AngularJS- document.getElementById() - 为什么元素返回 null？

Question

在我的 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>
    ...

在ctrl.js文件中，我有如下函数：

angular.module('app.widget').run(function($templateCache){
    ...
}).controller('WidgetPickerCtrl', function($scope, $timeout, fxTag, gPresets, appWidget){
    ...
    $scope.widget = undefined;
    ...
    $scope.checkboxModel = {
        value1 : true,
        value2 : false
    };
    ...
    var widgetHeadingCheckbox = document.getElementById("noWidgetHeading");
    console.log(widgetHeadingCheckbox);
    $scope.$watch('widgetHeadingCheckbox', function(){
        console.log("Value of checkbox has changed: ", widgetHeadingCheckbox);
    });

    function hideWidgetHeading(){
        if(widgetHeadingCheckbox){
            console.log("Value of widgetHeadingCheckbox in 'if': ", widgetHeadingCheckbox);
            return widgetHeadingCheckbox;
        } else {
            console.log("Value of widgetHeadingCheckbox in 'else: ", widgetHeadingCheckbox);
            return widgetHeadingCheckbox;
        }
    }

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

我正在尝试使用上面的hideWidgetHeading() JS 函数在按下对话框“提交”按钮时执行不同的操作，具体取决于复选框是否被选中。

目前，如果我选中复选框（即已选中 - 其值应为 true），然后单击表单上的“提交”按钮，我会在控制台中获得以下输出：

空

复选框的值已更改：null

else中widgetHeadingCheckbox的值：null

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

为什么我的复选框的值总是null...我希望它是true 或false，但从来没有null...我需要在某个地方初始化它吗？我以为我已经在 HTML 中做到了，设置它的 ng-true-value 和 ng-false-value...

编辑

按照 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>

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

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

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

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

Answer 1

我会先将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-true-value 或 ng-false-value，因为使用 'true' 和 'false' 是默认设置。如果您不想使用默认值，请确保您使用的是表达式：ng-true-value="'YES'"

确保指令的使用正确：ngChange 应该是 ng-change。

hideWidgetHeading() 未暴露在作用域中，因此无法从前端调用。考虑将其绑定到 $scope：$scope.hideWidgetHeading = function(){...}

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

Answer 2

您需要将 ngChange 更改为 ng-change。此外，线索在于方法名称 getElementById() - 缺少 id，您有名称，但没有 id。

Answer 3

在你的输入标签中保留 ng-model ng-model="noWidgetHeading"

而且也不是从文档中读取

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

尝试从作用域读取

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

这只是建议尝试让我知道

Answer 4

在你的输入标签中使用ng-model

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