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

  
    
    
    
    
    
    
    
    
  
  
    
        button1
        button2
        
    
  

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

  
    
    
    
    
    
    
    
    
  
  
    
        button1
        button2
        
    
  

解决方式2，去除标签

  
    
    
    
    
    
    
    
    
  
  
        button1
        button2
        
  

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

 label1

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；