-2

我正在尝试使用内部按钮制作一个引导手风琴，该按钮将折叠当前手风琴段并打开下一个手风琴，由于某种原因，这不起作用。

HTML：

<div ng-controller="AccordionDemoCtrl">  
    <accordion>
       <accordion-group id="firstpanel" heading="Static Header 1"  is-open="status.isFirstOpen">
          <span id="span1">This content is straight in the template.</span><br> 
          <button id="nextpanel">Next</button>
       </accordion-group>
       <accordion-group heading="Static Header 2">
          <span id="span1">This content is straight in the template.</span>
       </accordion-group>
    </accordion>
</div>

JAVASCRIPT：

angular.module('plunker', ['ui.bootstrap']);
function AccordionDemoCtrl($scope) {
  $scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
  };

  $("#nextpanel").on("click", function() {   
   $(firstpanel).click();
  });
}

我在这里做了一个 plunker 的例子：Plunker

4

1 回答 1

0

您不能在控制器构造函数中使用 jquery 选择器。在那个阶段， DOM 元素#nextpanel甚至不在 DOM 树中，所以$("#nextpanel")本质上是一个空数组。

我建议你完全忘记 jquery。jquery 的唯一情况可能是当您需要使用您已经熟悉的插件（如日历）时。在任何情况下，jquery 代码（带有 的那个$()）应该严格地驻留在包装插件的指令的链接函数中。

MVC 方式，是让“模型”（JS 对象）驱动 UI。Angular 会发挥它的魔力来保持两者同步。

存储哪个手风琴打开的模型可以简单地是一个布尔数组：

$scope.status = [true, false, false, false];

打开下一个手风琴只是找到打开了哪个手风琴，并将下一个手风琴设置为真（或环绕到第一个手风琴）。

$scope.next = function() {
    var indx = $scope.status.indexOf(true);
    $scope.status[(++indx) % $scope.status.length] = true;
};

手风琴组件将确保true在任何给定时间只有其中一个。

现在，您的模板类似于：

<accordion>

    <accordion-group heading="Static Header 1"  is-open="status[0]">
      <span>This content is straight in the template.</span><br>
      <button ng-click="next()">Next</button>
    </accordion-group>

    <accordion-group heading="Static Header 2"  is-open="status[1]">
      <span>This content is straight in the template.</span><br>
      <button ng-click="next()">Next</button>
    </accordion-group>

    <accordion-group heading="Static Header 3"  is-open="status[2]">
      <span>This content is straight in the template.</span><br>
      <button ng-click="next()">Next</button>
    </accordion-group>

    <accordion-group heading="Static Header 4" is-open="status[3]">
      <span>This content is straight in the template.</span><br>
      <button ng-click="next()">Start over</button>
    </accordion-group>

</accordion>

这是固定的plunker。

于 2014-05-14T09:27:43.040 回答