AngularJS - ui-bootstrap手風琴 - 在ng-repeat中使用ng-controller不起作用

我試圖構造一個手風琴列表，該手風琴列表展示了手風琴展開時的更多細節。這裏是模板的一個簡化版本：AngularJS - ui-bootstrap手風琴 - 在ng-repeat中使用ng-controller不起作用

<body ng-controller="MainController as main"> 
    <accordion> 
     <accordion-group ng-repeat="r in main.results" ng-controller="DetailsController as d"> 
      <accordion-heading ng-click="d.getDetails(r.id)"> 
       {{r.name}} 
      </accordion-heading> 
      <ul> 
       <li ng-repeat="v in d.details">{{v.detail}}</li> 
      </ul> 
     </accordion-group> 
    </accordion> 
</body>

的DetailsController最初有一個空的細節陣列，但是當函數getDetails（）被調用時，該陣列由服務人口（detailsService僅僅是一個抽象的$資源呼叫）。這部分不適用於手風琴時適用，但在這種特殊情況下，手風琴的標題沒有任何反應。請看下圖：

app.controller('DetailsController', function(detailsService) { 
    var vm = this 

    var details = [] 
    var detailsPopulated = false 

    var getDetails = function(id) { 
     console.log('getDetails()') 
     if (!vm.detailsPopulated) { 
      console.log('Getting details') 
      detailsService.get({id: id}, function(data) { 
       vm.details = data.results 
       vm.detailsPopulated = true 
      }); 
     } 
    } 

    return { 
     details: details, 
     getDetails: getDetails 
    } 

});

該控制器工作在其他情況下，但由於某些原因，在手風琴頭不調用getDetails功能在所有NG-點擊 - 如果它這樣做，我會看到「getDetails（）「在控制檯中，因爲這是getDetails函數的第一條語句。

更簡單：使用模擬「細節」設置控制器不起作用。

app.controller('DetailsController', function() { 
    var details = [{detail: 'Test'}] 

    return { 
     details: details 
    } 
});

模板：

<body ng-controller="MainController as main"> 
    <accordion> 
     <accordion-group ng-repeat="r in main.results" ng-controller="DetailsController as d"> 
      <accordion-heading> 
       {{r.name}} 
      </accordion-heading> 
      <ul> 
       <li ng-repeat="v in d.details">{{v.detail}}</li> 
      </ul> 
     </accordion-group> 
    </accordion> 
</body>

甚至沒有的服務和NG-點擊這個簡化的示例中刪除的作品。

任何人都可以建議一個解決方案嗎？我也試圖用「控制器爲」技術來完成這個任務，而不是在任何地方使用$ scope。

來源

2015-04-27 cody

你可以創建一個這樣的小提琴/ plunker？代碼看起來不錯。控制檯中的任何錯誤？ –

您無法將ng-click設置爲<accordion-heading>，因爲ui.bootstrap將對heading使用不同的DOM。你可以看看developer console看什麼ui.bootstrap翻譯<accordion-heading>到DOM。我想你想動態加載內容accordion。達到此目的的一種方法是在時accordion爲打開並執行加載。我創建了這個fiddle來演示這個想法。有些事情，你一定要注意：

你不能把ng-controller內accordion-group，因爲這將提高錯誤multiple directive asking for isolated scope。這是東陽<accordion-group>是孤立範圍和角度將不允許2範圍：一個從控制器範圍和一個從指令分離的範圍結合到相同的HTML。 Reference。解決它的方法之一是把與ng-controller和ng-repeat一個div外accordion-group
```
<div ng-repeat="r in main.results" ng-controller="DetailsController as d"> 
    <accordion-group> 
     ... 
    </accordion-group> 
</div> 
```
您可以添加attrs是開到accordion-group和$watch其變化和執行裝載。Accordion指令將在您open或close,accordion時更改is-open值。

希望它有幫助。

來源

2015-04-27 14:36:10 themyth92

AngularJS - ui-bootstrap手風琴 - 在ng-repeat中使用ng-controller不起作用

回答

相關問題