2014-10-28 59 views
1

我正在嘗試爲ng-bootstrap手風琴中的每個項目創建一個控制器,但範圍並不像我期望的那樣工作。難道我做錯了什麼?如果我將控制器添加到我的ng-repeat手風琴組中的div中,它似乎可以工作。我可以在自舉手風琴組中使用ng控制器嗎?

在下面的示例SubVar不顯示,但SubVar2。

http://plnkr.co/edit/VLFT133dz3uae887S6qI?p=preview

HTML

<accordion close-others="oneAtATime"> 
    <accordion-group ng-repeat="group in groups" ng-controller="SubCtrl"> 
    <accordion-heading> 
     {{group.title}} can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i><br> 
     SubVar: {{sub_var}} 

    </accordion-heading>  
    {{group.content}}<br> 
    SubVar: {{sub_var}} 
    <div ng-controller="SubCtrl"> 
     SubVar2: {{sub_var}} 
    </div> 
    </accordion-group> 
</accordion> 

的JavaScript

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

    $scope.groups = [ 
    { 
     title: 'Dynamic Group Header - 1', 
     content: 'Dynamic Group Body - 1' 
    }, 
    { 
     title: 'Dynamic Group Header - 2', 
     content: 'Dynamic Group Body - 2' 
    } 
    ]; 
}); 
angular.module('ui.bootstrap.demo').controller('SubCtrl', function ($scope) { 
    console.log("SUBCTRL ...", $scope.group.title); 
    $scope.sub_var = $scope.group.title[$scope.group.title.length-1] 
    console.log("SUBCTRL ...", $scope.sub_var); 
}); 
+1

它看起來像手風琴組transcludes內的數據,並保持它自己的控制器和範圍的@header和isOpen等,所以我會說,除非你違反了指令。 --- https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js#L57 – Dylan 2014-10-28 06:08:58

回答

3

我工作圍繞這個迄今通過包裝手風琴組與我的NG-重複和NG-控制器一個div。

不乾淨,我想,但它似乎工作:

http://plnkr.co/edit/OpetDEMWwvBf94J04Mnr?p=preview

<div ng-controller="AccordionDemoCtrl"> 

    <accordion close-others="oneAtATime"> 
    <div ng-repeat="group in groups" ng-controller="SubCtrl"> 
    <accordion-group> 
     <accordion-heading> 
      {{group.title}} can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i><br> 
      SubVar: {{sub_var}} 

     </accordion-heading> 

     {{group.content}}<br> 
     SubVar: {{sub_var}} 
     <div ng-controller="SubCtrl"> 
     SubVar2: {{sub_var}} 
     </div> 
    </accordion-group> 
    </div> 
    </accordion> 
</div> 
+0

更好地把div放在組裏,防止它破壞 – Blowsie 2016-02-04 12:46:40

+0

已經有一段時間了,我想過這個問題,但我想我想要多個手風琴。所以手風琴組每ng重複迭代。如果我把這個div與重複的組合在一起,我會有一個手風琴元素和我所有的組合。 – 2016-02-04 23:23:13