Javascript 如何允许AngularJS中的事件传播？

AngularJS默认值似乎阻止了事件传播

从上面的链接可以看到，覆盖链接的

div

阻止事件传播其下的

div

，因此单击链接时链接不起作用。这只是一个测试案例，在实际情况中，

div

获得了其他功能，需要在那里，因此删除

div

不是一个选项

那么，如何使鼠标单击传播到

div

下的链接

---

代码，以防你不想点击链接，或者在遥远的将来某一天链接变成死链接。（并符合堆栈溢出的规则）

HTML

CSS

---

我不确定，这是一个非常混乱的例子，但问题不在于传播

问题是你隐藏了你的侧面，但是你的

.scope

仍然覆盖着100%的高度

因此，我做了以下几点：

HTML

这真的很让人困惑，因为当我尝试

{{rightShow&&leftShow？''：'.hidden scope'}}

时，

ng如果

不起作用，就会出现奇怪的插值错误，所以我决定以

$scope.checkShow

结束它

CSS

---

jsFIDLE

这不是关于事件传播的问题。。您的

div

（具有

范围

类和

ng控制器

的div）由于

z-index:1000

而被超级施加在具有

无关

类的div上

您可以访问以下内容的一种（简单）方法是减少

z-index

。因此，应用一个为我们做这件事的

ng类这可以是任何条件或功能。

在哪里,

div.hideit {
  z-index: -1
}

正如我提到的，div在我的真实案例中得到了函数。虽然您没有删除它，但创建
z-index:-1
也不好，因为div失去了覆盖
div
@cytsunny的功能，否则您无法访问它下面的内容。通过使用类似的
ng类
var myApp = angular.module('myApp',[]);

myApp.controller('testing', ['$scope', MyCtrlFunction]);
function MyCtrlFunction($scope) {
    $scope.leftShow = true;
    $scope.rightShow = true;
}

.container {
  position: relative;
  height: 300px;
  width: 500px;
  background-color: white;
}
.unrelated {
  position: absolute;
  width: 100%;
  height: 100%;
}
.unrelated a{
  display: inline-block;
  width: 50%;
  height: 100%;
  line-height: 300px;
  text-align: center;
}
.scope {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;
}
.half-cover {
  display: inline-block;
  height: 100%;
  width: 50%;
  background-color: black;
  color: white;
  line-height: 300px;
  text-align: center;
}

 <div class="container" ng-app="myApp">
  <div class="unrelated">
    <a href="http://stackoverflow.com">Stack overflow
    </a><a href="http://www.goole.com">Google</a>
  </div>
  <div ng-controller="testing">
    <div class="scope {{ checkShow() }}" >
       <div class="half-cover" ng-click="leftShow = false" ng-show="leftShow == true">
         Click to remove one
        </div><div class="half-cover" ng-click="rightShow = false" ng-show="rightShow == true">
      Click to remove one
    </div>
  </div>
</div>
</div>

$scope.checkShow = function(){
   if($scope.leftShow == false && $scope.rightShow == false) {
       return 'hidden-scope';
   } else {
      return ''
   }
}

.hidden-scope {
   height: 0;
}

ng-class="{'hideit': !leftShow && !rightShow}"

div.hideit {
  z-index: -1
}