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

     

widgetHeadingCheckbox in else的值：null

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

为什么我的复选框的值始终为null ...我希望它可以是true或false，但绝不会null ...我是需要在某处初始化它？我认为我已经在HTML中设置了ng-true-value＆amp; 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>

点击＆＃39;设置＆＃39;窗口小部件上的按钮，对话框打开：

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

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

如何让它隐藏窗口小部件中的内容，而不是从对话框中隐藏？

Answer 1

在输入标记中使用ng-model

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

Answer 2

将ng-model保留在输入标记ng-model="noWidgetHeading"

中

而且不是从文档中读取

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

尝试从范围中读取

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

这只是建议尝试让我知道

Answer 3

您想要将ngChange更改为ng-change。此外，线索在方法名称getElementById（） - 缺少id，你有名字，但不是id。

Answer 4

我会先将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(){...}

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