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

Question

我在我的 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");
  };

例如：

如果带有 header 文本 "Dynamic-2" 的手风琴项目被展开，我想要触发 fireOnExpand 事件处理程序并传递给事件适当的 ID（即 Id=8）。

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

Answer 1

  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>

Answer 2

见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>

如果您只想在 header 文本上执行 fireOnExpand，则将 ng-click 移动到 strong 标签

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

Plunker

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

How fire event when item expanded?

event-bubbling

twitter-bootstrap

angularjs

angular-ui

angular-ui-bootstrap