Question

这是我的行代码：

＆＃13;

angular.module('myApp', [])
    .controller('Ctrl', ['$scope', function($scope) {       
       $scope.foo = function() {
         alert("bla bla bla");
       };
    }]);

＆＃13;

#rollDiv {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#rollDiv label span { 
    padding:5px 5px 2px 2px;
    display:block;
}

＆＃13;

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">

<label>
<input type='checkbox' ng-click='foo()' hidden><span class=" glyphicon glyphicon-list-alt"></span>
</label>

</div>

＆＃13;

在上面的示例中，选中并取消选中元素时会触发foo事件，如果选中复选框，我可以从复选框元素调用事件，如果取消选中元素，则不调用事件。我不想在控制器中进行任何更改。

提前谢谢。

Answer 1

以下是您要找的内容。

<input type='checkbox' ng-model='chkMonitor'  ng-click='chkMonitor && foo()'>

chkMonitor只是一个简单的范围变量。

说明：

foo()函数可以通过将其置于布尔表达式中来有条件地执行。以下......

ng-click='false && foo()'

永远不会执行该功能。因此，任务是用表示检查状态的变量替换false。我们可以使用$event.target.checked - 但禁止在角度表达式中引用DOM。

解决方案是将范围变量与复选框绑定，并将其与foo()

一起使用

当然，有些传统方法可以过滤foo()函数内的点击。但是你的问题是如果没有检查就不会解雇foo()。

Answer 2

看看这个：

angular.module('myApp', [])
  .controller('Ctrl', ['$scope',
    function($scope) {
      $scope.foo = function() {
        console.log("bla bla bla");
      };
    }
  ]);

#rollDiv {
  margin: 4px;
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
  overflow: auto;
  float: left;
}
#rollDiv label span {
  padding: 5px 5px 2px 2px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="myApp" ng-controller="Ctrl">

  <label>
    <input type='checkbox' ng-model="cbxTest" ng-click='read?"":foo();read=true' hidden><span class=" glyphicon glyphicon-list-alt"></span>
  </label>

</div>

如果选中复选框，如何从复选框元素调用事件

2 个答案: