Question

我有一个用AngularJS编写的应用程序，我正在尝试添加这些功能，以隐藏其中一个网页上显示的某些小部件的标题，当用户选中一个复选框以表明它们应该被隐藏时。

目前，我在每个小部件的“标题”上都有一个显示多个小部件的页面，还有一个“设置”按钮。当用户单击“设置”按钮时，会在当前页面的顶部打开一个对话框（即，用户不会导航到另一个页面 - URL根本不会更改）。该对话框包含一个包含许多输入字段的表单 - 其中一个是我想用来“隐藏”网页上所有小部件标题的复选框。

我一直在关注https://docs.angularjs.org/api/ng/directive/ngHide的示例尝试这样做，但似乎无法使其正常工作......

我已将ng-hide属性添加到我的HTML元素中，如示例所示：

<div data-ng-if="widget.name === 'tag-box'" ng-hide="hideWidgetHeading"> <!-- class="ng-hide"-->
    <div class="divider"></div>
    ...

    <div class="divider"></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" id="noWidgetHeading" ng-true-value= "'YES'" ng-false-value= "'NO'" ng-change="hideWidgetHeading()" ng-click="hideWidgetHeading()" ng-checked="hideWidgetHeading" ng-model="viewModel.hideWidgetHeading">
                <!-- ng-model="viewModel.hideWidgetHeading" -->
                <span></span>
            </label>
        </div>
    </div>
</div>

我在hideWidgetHeading()文件中定义了ctrl.js函数，如下所示：

function hideWidgetHeading(){
    if($scope.widgetHeadingCheckbox==false) {
        $scope.$watch('noWidgetHeading', function() {
            $scope.hideWidgetHeading = true; 
            console.log("Value of hideWidgetHeading: ", $scope.hideWidgetHeading);
        });
        return true; 
    } else {
        console.log("hideWidgetHeading() else called (Widget/ctrl.js line 440) ");
        $scope.$watch('noWidgetHeading', function() {
            $scope.hideWidgetHeading = false; //document.getElementById('noWidgetHeading');
        });
        return false; 
    }

    if($scope.hideWidgetHeading) {
        console.log("hideWidgetHeading is true- hide the widget heading: ");

    }
    return $scope.hideWidgetHeading;
}

我已将以下CSS添加到我的widgets.scss文件中：

.animate-show-hide.ng-hide {
  opacity: 0;
}

.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
  transition: all linear 0.5s;
}

.umw-tag-box {
  opacity: 1;
}

当我加载我的页面时，当我单击“设置”按钮时，对话框会打开。如果我然后选中“隐藏小部件标题”复选框，然后单击“提交”，我添加的调试将在控制台中显示以下内容：

hideWidgetHeading的值：true

告诉我$scope.$watch(...){...}函数中的代码正在运行。

但是，如果我单击“设置”按钮，然后选中“隐藏小部件标题”复选框，或者选中它并再次取消选中它，然后单击“提交”，我会得到相同的true值显示在控制台调试中，表示$scope.$watch(...){...}函数内的代码正在运行，无论'watched'元素是否发生变化。

问题

如何确保$scope.$watch(...){...}内的代码仅在'watched'元素（即复选框）的值发生变化时才会运行？
如何实际“调用”我添加的CSS以隐藏我要隐藏的特定HTML上的HTML元素？或者我如何将CSS“应用”到我想要隐藏的HTML元素？

修改

我将复选框的HTML更改为：

<input type="checkbox" ng-model="checked" name="noWidgetHeading" id="noWidgetHeading">

按照建议，当我现在浏览到我的页面并打开对话框时，它会按照我的预期显示小部件：

当我点击小工具上的“设置”按钮时，“配置项目”对话框会在页面顶部打开：

但是，当我选中“隐藏小部件标题”复选框时，它实际上隐藏了“标记”标签＆amp;对话框中的输入框：

我要隐藏的元素实际上显示在打开对话框的页面上，而不是对话框本身...但我似乎无法弄清楚如何使用控件隐藏它对话框......有什么建议吗？

Answer 1

所以，这应该有用，甚至是first example shown in their docs，你的代码就是：

<div data-ng-if="widget.name === 'tag-box'" ng-hide="viewModel.hideWidgetHeading"> <!-- class="ng-hide"-->
    <div class="divider"></div>
    ...

    <div class="divider"></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" id="noWidgetHeading" ng-true-value= "'YES'" ng-false-value= "'NO'" ng-change="logWidgetHeading()" ng-click="logWidgetHeading()" ng-checked="viewModel.hideWidgetHeading" ng-model="viewModel.hideWidgetHeading">
                <!-- ng-model="viewModel.hideWidgetHeading" -->
                <span></span>
            </label>
        </div>
    </div>
</div>

如果要记录值，可以在事件上保留函数，但不需要隐藏。 ng-model指令将更新您的值，并且应该遵循ng-hide。

function logWidgetHeading(){
    console.log("Value of hideWidgetHeading: ", $scope.hideWidgetHeading);
}

我所说的关于函数或var：在某些情况下，我曾经从范围中获得了未更新的值，并且解决方案是引入一个函数来调用该值来进行检索。这是我认为你正在尝试的，因为ng-hide="hideWidgetHeading"显示的名称与你的功能相同：function hideWidgetHeading(){，这就是为什么我第一次说圆括号丢失的原因。所以另一个版本就是这样的（没有故意使用ng-model，以显示用事件修改内容的替代方法）：

<div data-ng-if="widget.name === 'tag-box'" ng-hide="getHideWidgetHeading()"> <!-- class="ng-hide"-->
    <div class="divider"></div>
    ...

    <div class="divider"></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" id="noWidgetHeading" ng-true-value= "'YES'" ng-false-value= "'NO'" ng-change="toggleWidgetHeading()" ng-checked="isHiddenWidgetHeading">
                <!-- ng-model="viewModel.hideWidgetHeading" -->
                <span></span>
            </label>
        </div>
    </div>
</div>

和js：

//initialisation to the default value:
$scope.isHiddenWidgetHeading = false;

//function that toggles the value:
$scope.toggleWidgetHeading = function(){
    $scope.isHiddenWidgetHeading = !$scope.isHiddenWidgetHeading;
};

//function to retreive the value:
$scope.getHideWidgetHeading = function(){
    return $scope.isHiddenWidgetHeading;
};

对不起，我在命名变量等方面有点快，但你应该得到你需要的东西..

AngularJS-如何使用ng-hide隐藏元素？

1 个答案: