Angular UI Bootstrap手风琴内容复选框不起作用答案

【问题标题】：Angular UI Bootstrap Accordion Content Checkbox Not WorkingAngular UI Bootstrap手风琴内容复选框不起作用
【发布时间】：2015-06-27 05:56:03
【问题描述】：

我正在使用 angularjs 1.3.13 版、ui-bootstrap-tpls 0.12 版和 angularjs ui 路由器 0.2.13 版。我想通过使用 ui-sref 显示手风琴内的模板内容。加载手风琴内的模板后，不会触发复选框组件的单击事件。对于除按钮之外的所有元素，在以下位置阻止找到的事件对于这个问题，我在 angular-ui-router.js 中的 ui-sref 指令的 onclick 绑定事件中添加了一个条件。有人请告诉我这个解决方案是否正确？
我的代码如下所示。

<accordion>
  <accordion-group is-open="true" ui-sref="addContract.add">
    <accordion-heading>
      Settings <i class="pull-right glyphicon" 
                  ng-class="{'glyphicon-chevron-down': $state.includes('true'), 'glyphicon-chevron-down': !status.open}"></i>
    </accordion-heading>
  <div ui-view="kpiParamSettings" autoscroll="true"></div>
</accordion-group></accordion>

一个 ui-sref 有以下 html

<div>
  <label><input id="login-remember" name="remember" type="checkbox" value="1">Stop</label>
</div>

element.bind("click", function(e) {
        var button = e.which || e.button;
        if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) {
          // HACK: This is to allow ng-clicks to be processed before the transition is initiated:
          var transition = $timeout(function() {
            $state.go(ref.state, params, options);
          });
          e.preventDefault();

          // if the state has no URL, ignore one preventDefault from the <a> directive.
          var ignorePreventDefaultCount = isAnchor && !newHref ? 1: 0;
          e.preventDefault = function() {
            if (ignorePreventDefaultCount-- <= 0)
              $timeout.cancel(transition);
          };
        }
      });

在上面的点击事件中我添加了以下条件

    element.bind("click", function(e) {
if(e.target.type!="checkbox") // Condition for avoiding to bind the checkbox click event
      {
            var button = e.which || e.button;
            if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) {
              // HACK: This is to allow ng-clicks to be processed before the transition is initiated:
              var transition = $timeout(function() {
                $state.go(ref.state, params, options);
              });
              e.preventDefault();

              // if the state has no URL, ignore one preventDefault from the <a> directive.
              var ignorePreventDefaultCount = isAnchor && !newHref ? 1: 0;
              e.preventDefault = function() {
                if (ignorePreventDefaultCount-- <= 0)
                  $timeout.cancel(transition);
              };
            }
}
          });

【问题讨论】：

标签： angularjs accordion angular-ui-bootstrap ui-sref

【解决方案1】：

使用element.bind 不会触发摘要循环，因此您的用户界面不会更新。使用ngClick 或将$scope.$apply() 添加到您的点击处理程序以手动触发摘要循环。

【讨论】：

【解决方案2】：

我已通过使用以下手风琴声明解决了上述问题。

我的代码是

<accordion>
   <accordion-group is-open="true" ui-sref="addContract.add"> 
     <accordion-heading>
    Settings <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': $state.includes('true'), 'glyphicon-chevron-down': !status.open}"></i>
     </accordion-heading>
      <div ui-view="kpiParamSettings" autoscroll="true"></div>
   </accordion-group>   
</accordion>

修改代码后问题解决

<accordion>
   <accordion-group is-open="true"> // Removed ui-sref from this line
     <accordion-heading>
        <a ui-sref="addContract.add"> // Added a with ui-sref
            Settings <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': $state.includes('true'), 'glyphicon-chevron-down': !status.open}"></i>
        </a>
     </accordion-heading>
      <div ui-view="kpiParamSettings" autoscroll="true"></div>
   </accordion-group>   
</accordion>

【讨论】：