Angularjs 几个指令的坑

发布时间：2020-12-17 10:06:58 所属栏目：安全来源：网络整理

导读：一、问题描述 1、AG的两个指令，ngShow和ngIf,这两个属性简单描述一下： ngShow - - 这个指令可以控制添加的html元素的显示与消失，作用类似于css的dispaly：none和block, ngIF -- 这个指令效果和ngShow是一样的，不同的是ngIF是直接删除与显示htmt元素，删

一、问题描述

1、AG的两个指令，ngShow和ngIf,这两个属性简单描述一下：

ngShow - - 这个指令可以控制添加的html元素的显示与消失，作用类似于css的dispaly：none和block,

ngIF -- 这个指令效果和ngShow是一样的，不同的是ngIF是直接删除与显示htmt元素，删除Dom；

使用比较简单，重点来了，坑在于ngif使用上需要谨慎，会遇到scope绑定值错误的情况

2、简单的例子

HTML代码

<div ng-show="isshow" style="padding: 10px;border: solid red 1px;">
<h1>我是ngshow</h1>
<input ng-model="psd" type="text" id="psd" name="psd" placeholder="输入密码">
<p>密码：{{psd}}</p>
</div>
<div ng-if="isif" style="padding: 10px;border: solid red 1px;">
<h1>我是ngif</h1>
<input ng-model="name" type="text" id="name" name="name" placeholder="输入姓名">
<p>姓名：{{name}}</p>
</div>
<button class="btn btn-primary" ng-click="changeShow()">点击我ngshow变化</button>
<button class="btn btn-primary" ng-click="changeIf()">点击我ngif变化</button>
<p>姓名：{{name}}</p>
<p>密码：{{psd}}</p>

Js:

$scope.isshow = true;
$scope.isif= true;
$scope.changeShow = function() {
$scope.isshow = !$scope.isshow ;
}
$scope.changeIf = function() {
$scope.isif = !$scope.isif ;
}

分析一下代码：

很简单的一段代码，两个div里的内容风格是一致的，通过下面两个按钮控制消失，div里面都有一个输入框，用ng-model绑定了一个值，

我们输入后，发现，ngIF绑定的值是无法显示在外面的p标签外面。

结论：ngIF会影响并阻断scope绑定值，ngshow不会，建议：div里面有很多其他指令如ngmodel的尽量使用ngshow，单个独立的可以使用ngif

这个代码写的很简单，在项目中，经常会遇到，突然拿不到值得情况，好几百html代码，最后发现是滥用了ngif，所以才写此文章。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!