Select 当 ng-click 在父元素中时元素不接受点击

Question

真的是快速提问。我注意到当我在 select 元素上方单击 ng-click 时，单击 select 列表不会更改值。

html:

<div ng-controller="MyController" ng-app>
  <div ng-click="test()">
    <select size="1" ng-model="selectedCountry" ng-options="c.name for c in countries"></select>
    {{selectedCountry}}
  </div>
</div>

http://jsfiddle.net/ky5F4/131/

谁能解释一下为什么会这样，是否有办法避免这种情况？我想在父触发上有一个点击事件以及 select ng-model 绑定数据更改。谢谢

Answer 1

<div ng-controller="MyController" ng-app>

    <select size="1" ng-model="selectedCountry" ng-options="c.name for c in countries" ng-change="changed()"></select>
    {{selectedCountry}}

</div>

控制器

 $scope.changed = function()
    {

        if($scope.modelname == "Whatever Your Parent Element is")
    {
        //whatever you want to do
    }
    }

Answer 2

如果您将 ng-click="$event.stopPropagation()" 添加到您的 select，它会起作用。

The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

Select 当 ng-click 在父元素中时元素不接受点击

Select element not accepting clicks when ng-click is in parent element

angularjs

angularjs-ng-click