为什么在angular中ng-show和ng-hide不能与$route一起工作？
在Angular中，ng-show和ng-hide是用于控制元素的显示和隐藏的指令。而$route是Angular的路由模块，用于管理不同页面之间的切换和导航。
ng-show和ng-hide是基于元素的CSS样式来控制显示和隐藏的，它们通过添加或移除CSS类来实现元素的显示和隐藏。而$route是通过改变URL来触发不同的页面加载和渲染。
由于ng-show和ng-hide是基于CSS样式的控制，它们的显示和隐藏是通过添加或移除CSS类来实现的。而$route的切换是通过改变URL来触发的，它会重新加载并渲染新的页面。
当ng-show或ng-hide与$route一起使用时，可能会出现以下问题：
- 页面加载时，ng-show或ng-hide可能会在$route完成之前就开始执行，导致元素的显示或隐藏不符合预期。
- 页面切换时，ng-show或ng-hide可能无法正确地处理元素的显示或隐藏，因为它们是基于CSS样式的控制，而不是基于路由的切换。
为了解决这个问题，可以考虑使用ng-if指令代替ng-show或ng-hide。ng-if是基于条件表达式来控制元素的显示和隐藏的，它会在条件为真时渲染元素，条件为假时移除元素。与ng-show或ng-hide不同，ng-if会在每次路由切换时重新计算条件表达式，从而确保元素的显示或隐藏与路由的切换同步。
另外，如果需要在Angular中实现更复杂的条件控制和页面切换，可以考虑使用Angular的路由守卫（Route Guards）功能。路由守卫可以在路由切换前后执行一些逻辑，例如验证用户权限、加载数据等。通过结合路由守卫和ng-if指令，可以实现更灵活和可控的页面切换和元素显示隐藏的功能。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse
相关·内容
如果我设置了$scope.true = false;，我将期望一个引用true的角表达式计算为false。同样，我预计$scope.false = true和$scope.undefined = true也会产生类似的结果。
撇开恶毒的命名不说，为什么这些不起作用？在角码中，它决定是否引用$scope属性？
var myApp = angular.module('myapp', []);
myApp.controller('myctrl', function($scope) {
$scope.foo = "bar";
$sc
浏览 3提问于2016-11-15得票数 0
回答已采纳
据我所知，ng-show和ng-hide都用于显示或隐藏给定的HTML元素。但是我在一次面试中被问到一个问题:如果我们有ng-hide，为什么我们需要ng-show？为什么我们应该支持ng-show而不是ng-hide，反之亦然？
我知道ng-if和ng-show/ng-hide之间的区别，但是我想知道ng-show和ng-hide之间的区别，因为这两者的功能是相同的。
浏览 0提问于2018-01-29得票数 2
回答已采纳
我有一个angular应用程序。我可以通过编写{{liked.length === 0}}成功地输出true或false。它可以根据需要在true和false之间切换。
但是，如果我在ng-show/hide中使用它：
<any ng-show="liked.length === 0" />
它总是显示标记ng-show，从不显示ng-hide。为什么？
浏览 0提问于2014-04-29得票数 0
我目前正在使用这个库：
它工作得很好，但如果它开始隐藏，它就不会工作得很好。但我需要它从隐蔽开始。我有一个id为"div_swiper“的div，它包含了swiper。最初有"ng-hide“类，如果我执行这个类，没有这个类，如果它工作得很好。就像我说的，我需要这个div开始隐藏。
我如何才能让它从隐藏和正常工作开始？
<div id="div_swiper" class='ng-hide'>
<swiper>
<slides>
<slide>Lor
浏览 2提问于2017-04-27得票数 0
有没有一种好的方法可以添加和删除元素，而不会重排页面并导致所有元素抖动？
angular指令ng-show和ng-hide不保留布局。
而类也不需要
<div class="show">...</div>
<div class="hidden">...</div>
有没有一种好的方法可以添加和删除元素，而不会重排页面并导致所有元素抖动？
浏览 1提问于2014-12-21得票数 0
1回答
我用的是角1.5.8。我在组件中有一个组件。父组件具有一个带有ng-show的div，该div决定何时应该出现子组件。
父组件..。
function ScheduleController() {
var ctrl = this;
ctrl.openTodo = function() {
ctrl.isTodoVisible = true;
}
}
angular.module('myApp').component('userTodoDisplay', {
template: `
<button c
浏览 2提问于2016-10-24得票数 1
回答已采纳
1回答
My checkbox input使用ng-show切换我的myDiv。我希望这个看起来很花哨。因此，我使用了一个过渡效果，使用了angular-animate.js。
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"><
浏览 1提问于2016-04-01得票数 1
当项目的可见性被ng-hide/ng-show切换时，我如何在Angular中的元素上设置动画？
需要添加哪些CSS类才能正确地使元素具有动画效果？
浏览 2提问于2016-10-30得票数 0
我需要展示和隐藏一个div。我是通过将假值的真值放入ng-显示中来实现的。
<div class="drawingToolPropertie" ng-show="{{ drawingMods.settingRoof}}">
<div class="drawingToolPropertie" ng-show="{{ drawingMods.settingObs}}">
但我得到的是：
<div id="roofPropertie" class="drawingToolPr
浏览 2提问于2014-02-05得票数 8
回答已采纳
1回答
angular应用程序中有3个按钮，具有以下详细信息：
<button ng-class="btnClass1" class="btn btn-lg tab" ng-click="addCust()">
<b ng-show="btnClass1 === 'btn-primary'" id="notch" class="notch ng-hide"></b>
"Add Customer" </button>
<
浏览 0提问于2020-06-14得票数 0
我是Angular JS的新手，我被这段代码迷住了，当我阅读教程时，我被Angular JS上的这段代码迷住了。请在这一点上帮我。
更具体地说，“AfterClicked”是如何控制DIV元素的可见性的。
HTML代码：
<!DOCTYPE html>
<html ng-app="myModel">
<head>
<title>Begin with Angular</title>
<meta charset="utf-8" />
<!-- Adding the
浏览 1提问于2017-07-02得票数 0
我正在学习AngularJS，但是我对"ng-hide“指令有一个问题，它不起作用。
这是我的HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prueba ng-hide/ng-show</title>
</head>
<body>
<p ng-hide="true">I'm hidden</p>
<p
浏览 0提问于2016-02-11得票数 1
<div >
<table class="table">
<thead>
<th>Name</th>
<th>Roll</th>
<th>Town</th>
<th>Class</th>
</thead>
<tr ng-repeat="c in contacts.data | filter:query"><b
浏览 5提问于2018-01-01得票数 2
回答已采纳
我刚刚开始使用AngularJS，并希望创建一个自定义模板指令，用于创建“就地”可编辑表。这样做的目的是：
<tr ng-repeat="customer in model.customers">
<ng-template ng-hide="customer === model.selectedCustomer"> <!-- display template-->
<td>{{customer.name}}</td>
</ng-tem
浏览 3提问于2013-12-12得票数 4
回答已采纳
当通过IOS上的AngularJS 2.7.0中的InAppBrowser访问使用PhoneGap 1.2.0rc1构建的我的网站时，屏幕上的ng-show内容闪烁。
<form method="POST" action="" name="manualEntryForm" class="form-inline">
<div ng-show="showErrors && !manualEntryForm.$valid" class="errorMsg ng-hide
浏览 0提问于2014-01-07得票数 2
我有下面的代码，并且运行良好，我想知道如何使这个变量显示在我的根范围内？
问题是我现在使用了不同的控制器和指令，所以：
如果我把这段代码放入directive1：
<a href="" ng-click="showme=true">Show</a>
<button ng-click="showme=false">Hide</button>
这在directive2中是行不通的：
<div class="wrapper">
<p ng-hide=&
浏览 4提问于2016-07-14得票数 1
回答已采纳
HTML：
<div class="validation-summary-errors text-danger">
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine">To field is required</span>
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine">To field is requir
浏览 0提问于2016-05-13得票数 0
我需要两个ng-hide directives.One用于编辑工资，一个用于隐藏salary.But，如果我在单个html标记中使用两个ng-hide指令，只有编辑有效，但隐藏无效。
<table border="1">
<tr>
<td>ID</td>
<td>Name</td>
<td ng-hide="hide"><span>Salary<
浏览 34提问于2017-08-03得票数 0
回答已采纳
我正在学习angular js，我发现我有问题。
我正在创建一个新项目。
我有一些按钮编辑，添加，删除，
如果我点击我的编辑按钮，然后显示所有字段，但我只想显示当前字段，那么我就单击来更新此字段。
我的代码在这里
Anguar
var app = angular.module('addApp', []);
app.controller('modifyCtrl', ['$scope', function($scope){
$scope.tabelsData= [
{'name':'rohit'
浏览 49提问于2014-10-20得票数 18
回答已采纳
所以我用angular js 1.x (1.6)做了一个Todo应用程序，但是我的ng-show和ng-hide不起作用。这样做的目的是在您单击编辑按钮编辑当前待办事项时，使文本框出现在待办事项部分，同时编辑按钮也会变成完成按钮，以便您可以进行更改。然而，这是行不通的。控制台没有显示错误，我相信逻辑是正确的。`
<div ng-controller="todoCtrl as ctrl">
<div>
<p>Add a Todo</p>
<input type="text&#
浏览 7提问于2017-01-29得票数 0
回答已采纳
我知道ng-show和ng-hide之间的区别，但我在一次采访中被问到一个问题，如果我们有ng-show，为什么我们需要ng-hide，因为我们知道，两者都根据它们的值显示或隐藏给定的HTML元素，这些值可以是真的，也可以是假的。我们喜欢ng-show而不是ng-hide的原因是什么?反之亦然？
浏览 12提问于2017-07-28得票数 2
3回答
我正在使用AngularJS，我遇到的是ng-show使我的整个web应用程序崩溃。另一方面，使用ng-hide可以很好地工作。下面是一个代码片段：
Image.get({project_id: $scope.project.id}, function(images_data) {
$scope.project.images = images_data.images;
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect: 'none
浏览 1提问于2015-07-30得票数 0
我的应用程序中有四到五个选项卡视图。因此，单击每个选项卡，我将根据选项卡选择显示内容。
我尝试了两种方法，一种是ng-route，另一种是ng-show/ng-hide。我觉得ng-show/ng-hide在性能级别上很好，我认为我应该遵循同样的标准。这是我试过的
第一种方法ng-路由
main.php
var testApp = angular.module("testApp", ["ngRoute"]);
testApp.config(function ($routeProvider) {
$routeProvider.when("/tab1"
浏览 0提问于2016-10-09得票数 0
回答已采纳
在我的angular js项目中，我有四个复选框。在四个复选框中，三个复选框具有三个条件(如ng-hide和ng-show)，其中一个复选框具有全选和取消选择所有条件。
一切都很正常。但最初，如果您选择，选中所有复选框一切都被选中，条件也正常工作(其他三个复选框也被选中)。但是稍后，如果您取消选中其他三个复选框(如ng-hide和ng-show)，则在不取消选中所有复选框的情况下将不起作用。
有什么办法解决这个问题吗？
<code>A0</code>
浏览 30提问于2020-06-08得票数 0
回答已采纳
1回答
我正在开发一个应用程序，点击按钮，然后隐藏或显示特定的元素。
我正在用ng- AngularJS来实现这一点。由于某种原因，转换不能正常工作。我对CSS3的转换非常陌生，所以我做错了什么？
我只希望它有一个平滑的淡出效果，这样外观就不会显得那么不自然了。
CSS3
#custom-url{
-webkit-transition: all 2s ease;
transition: all 2s ease;
}
#custom-url .ng-hide{
opacity: 0;
}
<input ng-model="custom_url"
浏览 2提问于2015-07-11得票数 1
回答已采纳
1回答
我正在尝试迁移到Angular 2的工作方式，从现有的控制器中删除逻辑是我的第一个目标。我面临的一个问题是如何根据服务/工厂中的值切换元素的可见性。
以前我会这样做的；
1)将服务注入控制器
.controller(MyController, function(MyService))
2)将其公开为一个变量(使用controllerAs语法)
this.showWhen = MyService.serverHasProcessed;
3)使用了ng-show / ng-hide指令
<div ng-show="myCtrl.showWhen">...
因为在Ang
浏览 4提问于2015-01-29得票数 0
我无法单击加号按钮和减号按钮。我的xpath是//div[4]/span[2]
即使我的xpath是正确的，我也得到了一个异常。我还同步了它使用等待。
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="css/ziprooms.min.css">
<head>
<body>
<div class="zr-container">
<div class="ng-scope" autoscroll="
浏览 0提问于2015-12-08得票数 0
我的控制器里有这些线
$scope.VLANEnabledServers = {};
$scope.myEmpty = {};
console.log(angular.equals($scope.myEmpty, $scope.VLANEnabledServers));
以及模板中的这个ng-show
<table ng-show="!angular.equals(myEmpty, VLANEnabledServers)" ng-cloak class="table table-striped table-bordered ng-hide">
控制器
浏览 0提问于2014-12-16得票数 3
回答已采纳
1回答
角表行编辑后不皂化
、、、、
我在表中使用ng-重复来动态生成内容。我已经给出了编辑和删除表内容的选项。
但是我面临的问题是，一旦我编辑和保存了一行，它就消失了。我尝试使用jQuery手动向表行添加值，但仍然没有工作。
这是我的代码的。
这里是我的html页面：
<div class="container" ng-app="trial">
<table class="table table-hover" ng-controller="newTrial">
<tr>
<th class=&
浏览 0提问于2017-02-27得票数 0
回答已采纳
当使用Angular：'ng-show="userFieldForm.email.$invalid && userFieldForm.email.$touched“验证表单时，使用Angular //code.angularjs.org/1.4.0/angular.js可以很好地工作。
但在使用//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js.时
我确实找过了，但没有找到真正的解决方案。我肯定我漏掉了一条信息。
以下是代码的一部分：
<head>
<m
浏览 0提问于2015-12-11得票数 1
1回答
在表单中使用前缀时，表单验证错误不会显示
当表单使用scope_prefix时，验证中断。错误消息停止显示，例如"field is requred“中断。
示例如下：
class ExampleForm(NgModelFormMixin, NgFormValidationMixin, forms.ModelForm):
form_name = 'example_form_name'
controller = "ExampleFormController"
def __init__(self, *args, **kwargs):
浏览 0提问于2015-01-28得票数 1
当我添加任何数据时，我在文本框中获取值，而不是在span.And中获取值。在添加数据后，我正在获取完成按钮，而不是获取更新我的完整代码：有任何错误吗？
<script type="text/javascript">
var app=angular.module("mainapp",[]);
app.controller('mycontrol',function($scope){
$scope.filters=[];
$scope.add=function(filter){
$scope.filters.
浏览 1提问于2017-08-03得票数 0
1回答
对于下面的场景，我一直在为我的方法而奋斗。我有一个自定义指令authorize，其中传递一个组的名称。如果当前用户的配置文件中有这个组，那么元素将是可见的，如果不是，元素将被隐藏。示例：
<button class="btn btn-default" role="button"
ng-click="myVm.edit()"
authorize="{{myVm.groupName}}"><!--groupName = "accountants"-->
&
浏览 4提问于2016-11-04得票数 0
回答已采纳
3回答
我希望在html字符串中为我的元素设置ng-show或ng-hide，并将其传递给使用ng-bind查看，但是ng-show / ng-hide不工作，并且我的元素总是可见的。
这是我的控制器代码：
$scope.my = {
messageTrue: true,
messageFalse: false
};
$scope.HtmlContent = "<div ng-show='{{my.messageFalse}}'>This is incorrect (ng-show & my.messageFalse={{my.
浏览 2提问于2015-02-09得票数 4
回答已采纳
12回答
我想知道在angular中是否有一种方法可以有条件地显示内容，而不是使用ng-show等。例如，在backbone.js中，我可以对模板中的内联内容做一些事情，比如：
<% if (myVar === "two") { %> show this<% } %>
但在angular中，我似乎仅限于显示和隐藏用html标记包装的内容。
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
在
浏览 2提问于2013-01-05得票数 200
回答已采纳
1回答
有人建议我，我哪里出了问题?我还需要对我用来编辑和删除的脚本做一些解释，因为我只是引用了一些材料，使用了没有understanding.Can的代码--有人解释过吗？
代码：
<table border="1">
<tr>
<td>ID</td>
<td>Name</td>
<td>Salary</td>
</tr>
浏览 0提问于2017-08-02得票数 0
回答已采纳
2回答
当用户使用angular into my web-app点击提交按钮时，我尝试转发该用户：
html代码
<tr ng-controller="fCtrl as fiche">
<td>
<span ng-hide="fiche.canBeEdited()"></span>
<span ng-show="fiche.canBeEdited()">
<input type="
浏览 0提问于2014-07-16得票数 0
我很难让ng-show在我的指令模板中工作。我使用的是AngularJS 1.6.4。Chrome调试器在最终的DOM中显示了从ng-show="true"到ng-show="false"的成功更改。但是，当设置为true时，元素将保持隐藏状态。这似乎是因为AngularJS将一个ng-hide类添加到元素中的列表中，但是当ng-show更改为true时不会删除这个类。也许AngularJS在这个阶段没有进行评估？我怎样才能正确地展示/隐藏这个？
我已经尝试了很长一段时间，并且尝试了不同的方法，包括直接使用loading参数，而不是使用作用域的showspinn
浏览 3提问于2018-03-09得票数 1
回答已采纳
我正在尝试通过学习一个课程来学习angular，我在javascript方面没有太多的经验。我似乎不能让ng-class工作，也不明白为什么我会出现标题提到的错误。这是我的hotels.js文件：
'use strict'
//MODULE
var app = angular.module('hotelsApp', ['ngRoute']);
app.controller('HotelsController', ['$scope', function($scope){
$scope.rooms = m
浏览 0提问于2016-04-14得票数 0
2回答
我有一个table.In比正在做的行隐藏和显示使用角度编辑和保存的目的。它运行良好。
$scope.init=function(){
$scope.editable=true;
}
现在，当我点击表格行中的编辑按钮时，编辑按钮将被隐藏，而保存按钮将被显示。
$scope.editRow = function(id){
console.log(id);\\row id will be displayed here
$scope.editable=false;
}
这里我面临一个问题，如果我点击第二行的编辑，只有第二行应该是可编辑的。
我知道我们可以在这里使用jquery.
浏览 0提问于2017-12-04得票数 0
1回答
这个问题已经问了很多次了，但我认为这里的情况有点不同，我正在尝试遵循。与这里不同的是，我的数据是从api中获取的，我不能向数据中添加这样的属性item.editing。我试着把对象/事件传递给函数，但这不是解决它的角度方法，我想。
function myCtrl($scope) {
$scope.items = [{
name: "item #1",
}, {
name: "item #2",
}, {
name: "item #3",
}];
浏览 2提问于2015-10-10得票数 1
回答已采纳
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.newField = [];
$scope.editing = false;
$scope.data = [{
"supplier_name": "ABC",
"first_name": "example",
"last_name": "test",
浏览 0提问于2018-09-10得票数 0
回答已采纳
我有一个“记录”按钮和一个“停止”按钮。记录按钮具有ng-hide=“记录”，而停止按钮具有ng-show=“记录”。
我在单击" Record“时设置了$scope.recording = true，但在相当长的一段时间(~100ms)内，"Record”和"Stop“按钮在Record按钮消失之前都是可见的。
这种行为也发生在具有类似关系的其他各种按钮上。有谁知道为什么会发生这种情况吗？(我目前使用的是angular 1.2.18，这会有问题吗？)
谢谢!
浏览 0提问于2015-01-20得票数 0
我正在尝试从我的html上传一张图片，点击保存按钮，我正在调用控制器中的上传函数。当我进入控制器的上传功能时，我无法访问$scope查看$scope.file.name。
//upload image.html
<div class="horizontal">
<table border=1 frame=void rules=rows class="ui celled table" >
<thead style="text-align: center;">
<tr>
<th
浏览 0提问于2016-08-18得票数 0
2回答
在Angular中有一个切换功能，它按预期工作，但当页面刷新时，切换状态不会持续
目标:在页面刷新时保持切换状态
$scope.toggle = !$scope.toggle;
$scope.$watch('toggle', function(){
$scope.toggleText = $scope.toggle ? 'Guess The Year!' : 'Reveal The Year';
})
//HTML
<div> ng-show="toggle">Rev
浏览 11提问于2017-01-12得票数 0
1回答
我正在使用角的ng显示指令来改变问题在测试中的显示方式，然后在测试完成时显示结果。除了第一个问题外，一切都如预期的那样工作。当测试加载时，我初始化$scope.image = false。由于某种原因，同时出现带有ng-show="image“的div和带有ng-show="!image”的div。我希望只会出现带有ng-show="!image“的div。相关代码如下。注意:为了节省空间，我没有在控制器或index.html中包含所有问题或结果对象，其中包括适当的ng-app标题等：
html：
<div class="jumbotron text-ce
浏览 4提问于2014-08-22得票数 0
回答已采纳
1回答
在带有required、-validation和ng-messages的表单上，我在启动时使用ng-show隐藏指令，并且只在输入获得ng-dirty后显示错误消息。
为了保持元素填充它在布局中的空间，我有以下css规则来覆盖默认的ng-hide行为：
ng-messages.ng-hide:not(.ng-hide-animate), [ng-messages].ng-hide:not(.ng-hide-animate)
{
display: block !important;
visibility: hidden;
}
现在，当我在输入字段中输入文本时，在再次隐藏错误消息之
浏览 4提问于2016-04-25得票数 0
回答已采纳
我正在尝试使用browserify来构建我的团队正在处理的新项目，但它无法识别来自package.json的转换。它将在2台机器上构建，但在另外2台机器上不会构建。
这是我的package.json的相关片段。
"dependencies": {},
"devDependencies": {
....
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
浏览 1提问于2014-07-01得票数 0
我正在使用带有html5的angular。我在我的页面顶部附近有以下代码：
<h2 ng-show="stat == 'Active'">Carry On!!</h2>
<h2 ng-hide="stat == 'Active'">Account deactivated. To reactivate, please click <a href=""> Here.</a></h2>
这是问候的一部分。我基本上是想检查用户的状态是否为activ
浏览 1提问于2014-08-23得票数 0
我正在使用AngularJs ng-show，ng-hide作为控件，在不同的情况下，我也在javascript中使用show()，hide()。但只有ng-show和ng-hide在工作，不允许jQuery show()和hide()。
对于下面的div，我使用了ng-show，它工作得很好：
<div class="generic_error_message" id="genericmsg" ng-show="(QuoteNew.$invalid && submitted) ||(QuoteNew.Birthdate.$pris
浏览 1提问于2013-11-15得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
