Question

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

这是有效的plunker

当我扩展accordion时，我想在名为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”的accordion项目，我想要触发fireOnExpand事件处理程序并传递给事件适当的Id（即Id = 8）。

当手风琴项目展开时，如何触发功能fireOnExpand并传递适当的Id参数？

Answer 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

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

项目展开时的火灾事件如何？

2 个答案: