项目扩展时如何触发事件？答案

【问题标题】：How fire event when item expanded?项目扩展时如何触发事件？
【发布时间】：2016-05-17 16:15:56
【问题描述】：

我在我的 angularjs 项目中使用 bootstrap 手风琴。

这里正在工作plunker

当我展开手风琴时，我想在名为 fireOnExpand 的控制器中触发函数并将组的适当 Id 传递给函数。

这是我使用手风琴的方法：

  <div ng-controller="MainCtrl">
    <uib-accordion>
      <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups" ng-init="isOpen = $first" is-open="isOpen">

        <uib-accordion-heading>
          <span ng-click="fireOnExpand()"></span>
          <div class="text-center text-info">
            <strong>{{group.title}}</strong>
          </div>
        </uib-accordion-heading>
        {{group.content}} {{test}}
      </uib-accordion-group>
    </uib-accordion>

以下是控制器中显示的项目：

  $scope.groups = [
    {Id: 5, title: "Dynamic-1", content: "Dynamic Group Body - 1"}, 
    {Id: 8, title: "Dynamic-2", content: "Dynamic Group Body - 2"}, 
    {Id: 1, title: "Dynamic-3", content: "Dynamic Group Body - 3"},
    {Id: 3, title: "Dynamic-4", content: "Dynamic Group Body - 4"}];

这里是控制器中我不会在展开时触发的函数：

  $scope.fireOnExpand = function() 
  {
    alert("ParamPamPam");
  };

例如：

如果带有标题文本“Dynamic-2”的手风琴项已展开，我希望触发 fireOnExpand 事件处理程序并将相应的 Id（即 Id=8）传递给事件。

如何在手风琴项展开时触发函数fireOnExpand 并传递适当的Id 参数？

【问题讨论】：

标签： angularjs twitter-bootstrap angular-ui-bootstrap angular-ui event-bubbling

【解决方案1】：

见Event Bubbling

改变这个

<span ng-click="fireOnExpand()"></span>
<div class="text-center text-info">
    <strong>{{group.title}}</strong>
</div>

到

<span ng-click="fireOnExpand(group.Id)"> 
     <div class="text-center text-info">
       <strong>{{group.title}}</strong>
     </div>
</span>

如果您只想对标题文本执行 fireOnExpand，则将 ng-click 移动到 strong 标记

<span> 
      <div class="text-center text-info">
           <strong ng-click="fireOnExpand(group.Id)">{{group.title}}</strong>
      </div>
</span>

Plunker

【讨论】：

帕万感谢您的回答，酷！当第一个项目在之后展开时，有什么方法可以触发 fireOnExpand 函数？

【解决方案2】：

  angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;
  $scope.lastSelected= 0;
  $scope.firstLoad =false;

  
    $scope.groups = [{
      Id:2,
    title: "Dynamic Group Header - 1",
    content: "Dynamic Group Body - 1"
  }, {
    Id:52,
    title: "Dynamic Group Header - 2",
    content: "Dynamic Group Body - 2"
  }, {
    Id:23,
    title: "Dynamic Group Header - 3",
    content: "Dynamic Group Body - 3", 
    },{
    Id:78,
    title: "Dynamic Group Header - 4",
    content: "Dynamic Group Body - 4"
  }];
  
 

  $scope.fireOnExpand = function(id){
    
       if ($scope.firstLoad === false){
           if (id !== $scope.lastSelected || $scope.lastSelected !== 0){
             $scope.lastSelected = id;
             alert(id);
           }
           else {
              alert("Do nothing");
           }
          
          $scope.firstLoad = true;
          
       }
       else {
          if (id !== $scope.lastSelected ){
               $scope.lastSelected = id;
               alert(id);
          }
          else {
            alert("Do nothing");
          }
          
         
       }
    
    
    
  };
   
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div ng-controller="AccordionDemoCtrl">
    <uib-accordion close-others="oneAtATime">
      <uib-accordion-group heading="{{group.title}}" ng-click="fireOnExpand($index)" ng-repeat="group in groups" is-open="$first">{{group.content}}</uib-accordion-group>
    </uib-accordion>
  </div>
</body>

</html>

【讨论】：

我将 lastSelected 设置为零。默认情况下它选择的第一个元素。如果你运行代码，你可以看到这一点。当您单击第一个元素时。它让你喜欢已经点击了。
嗯。我现在明白你了。我在找这个
Nazir 我只需要在点击标题而不是所有展开区域时触发该功能