记一个Angular的问题(ng-if,ng-show)

最新推荐文章于 2023-04-05 08:48:52 发布

timelessmemoryli

最新推荐文章于 2023-04-05 08:48:52 发布

阅读量4.3k

点赞数

分类专栏： Angularjs 文章标签： angularjs bug ng-if ng-show

本文链接：https://blog.csdn.net/u014788227/article/details/53764010

版权

Angularjs 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AngularJs</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/angular.js"></script>
    <script src="js/cmt.js"></script>
  </head>
  <body ng-controller="mainController">
    <label>
        <button class="btn btn-info" ng-click="change(label, $event)" ng-if="label.isSelect">button1</button>
        <button class="btn btn-success" ng-click="change(label, $event)" ng-if="!label.isSelect">button2
        </button>
    </label>
  </body>
</html>

var app = angular.module('app', []);

app.controller('mainController', ['$scope', function($scope) {
	$scope.label = {
		isSelect : true
	}

	$scope.change = function(label, event) {
		console.log(event.target)
		label.isSelect = !label.isSelect
	}
}])

上面代码本意是点击切换button，但是实际结果是button没改变，通过调试发现真正的过程是变了两次变回了初始状态，也就是change函数执行了两次，我试着把第二个函数名字改成别的，但是结果还是执行了。函数体中

label.isSelect = !label.isSelect

这段存在就会引起执行button2的点击事件执行。console结果：

解决方式1，ngif改为ngshow

<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AngularJs</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/angular.js"></script>
    <script src="js/cmt.js"></script>
  </head>
  <body ng-controller="mainController">
    <label>
        <button class="btn btn-info" ng-click="change(label, $event)" ng-show="label.isSelect">button1</button>
        <button class="btn btn-success" ng-click="change(label, $event)" ng-show="!label.isSelect">button2
        </button>
    </label>
  </body>
</html>

解决方式2，去除<label>标签

<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AngularJs</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/angular.js"></script>
    <script src="js/cmt.js"></script>
  </head>
  <body ng-controller="mainController">
        <button class="btn btn-info" ng-click="change(label, $event)" ng-if="label.isSelect">button1</button>
        <button class="btn btn-success" ng-click="change(label, $event)" ng-if="!label.isSelect">button2
        </button>
  </body>
</html>

原因是label包裹button会执行两次click事件，因为第一次改变使得第二个button显示出来执行了第二个button的click事件。

<label for="innerIpt1">
 <input id="innerIpt1" type="checkbox"/>label1
</label>

var label1 = document.querySelector("label");
var input1 = document.querySelector("#innerIpt1");

label1.addEventListener("click", function() {
  console.log("label1");
}, false);
input1.addEventListener("click", function(e) {
  // e.stopPropagation()
  console.log("input1");
}, false);

点击label1的时候，console输出:

 label1 
 input1
 lable1

①点击label1，触发click，输出 label1；
②点击label1，用于浏览器内部关联关系会触发input的click，输出input1；
③上一个事件冒泡到label1，触发click，输出 label1；

timelessmemoryli

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记一个Angular的问题(ng-if,ng-show)

AngularJs button1 button2 var app = angular.module('app', []);app.controller('mainController', ['$scope', function($scope) { $scope.l
复制链接

扫一扫