AngularJS - 這是什麼正確的方法？

Question

我創建了一個頁面，您可以在面板中查看用戶的大量細節。

每個面板包含的一些信息，從服務接收，有時上有動作。

我有大約10板，和觀衆決定，他希望看到的東西。

將這些面板中的每一個設置爲單獨的控制器， 或者只有具有動作的面板需要位於單獨的控制器中，或者一個控制器中的所有面板都正確嗎？

---

如果每個面板控制器，和我的代碼是這樣的：

div class="panel panel-default"> 
    <div class="panel-heading">Panel Heading</div> 
    <div class="panel-body" ng-controller="historyPanel" ng-include="'panels/history.html'"></div> 
</div> 

有沒有辦法讓我知道，如果面板是空的？

例如，我有一個歷史的面板，我想告訴時，纔會有歷史表明，我不想秀「沒有歷史」，只是想隱藏面板。

但我想保持面板代碼history.html視圖之外。

Answer 1

你應該考慮爲此創建一個指令。您可以創建一個包含所有10個面板的單個指令，並提供一個屬性來指定要顯示哪個面板，也可以創建10個不同的指令。

喜歡的東西：

<my-panel panel="history" ng-show="userPanel.history.display"></my-panel> 
<my-panel panel="settings" ng-show="userPanel.settings.display"></my-panel> 
<my-panel panel="friends" ng-show="userPanel.friends.display"></my-panel> 
<my-panel panel="music" ng-show="userPanel.music.display"></my-panel> 

然後你的範圍控制器可能有類似：

app.controller('MyController', function($scope) { 
    $scope.userPanel = { 
     history: { display: true }, 
     settings: { display: true }, 
     friends: { display: true }, 
     music: { display: false } 
    } 
}); 

通過這種方式，你可以從其中有要顯示其面板的用戶偏好的服務加載數據。

Answer 2

嘗試這樣的事情，儘量不要不惜一切代價注入$範圍。 :)

function PanelCtrl() { 
    'use strict'; 

    var ctrl = this; 

    ctrl.panels = [{ 
    "id": 0, 
    "name": "Lucia Oconnor", 
    "history": "my history" 
    }, { 
    "id": 1, 
    "name": "Stevenson Mcintosh", 
    "history": "my history" 
    }, { 
    "id": 2, 
    "name": "Spears Sims", 
    "history": "my history" 
    }]; 

} 

function panel() { 
    'use strict'; 

    return { 
    restrict: 'E', 
    scope: {}, 
    bindToController: { 
     //Depends what youd like to do with the PanelCtrl 
     //'&': use a function on that ctrl 
     //'=': two way data binding 
    }, 
    controller: 'PanelCtrl as ctrl', 
    templateUrl: './templates/panel.ng.html' 
    }; 
} 

angular 
    .module('app', []) 
    .controller('PanelCtrl', PanelCtrl) 
    .directive('panel', panel); 

這將是模板：

//also if static content might want to use--one time bindings. 
    // that would be ::panel.name 
    <div class="panel panel-default" id="panel_{{panel.id}}"> 
    <div class="panel-heading">{{Panel.name}}</div> 
    <div class="panel-body">{{Panel.history}}</div> 
    </div> 

這將是你的HTML：

//be sure to include track by, major perf gains. 
<div class="container" ng-repeat="panel in ctrl.panels track by panel.id"> 
    <panel bind="here" ng-if="ctrl.history.length"></panel> 
</div>