AngularJS - Was ist der richtige Weg dafür?

Question

Ich habe eine Seite erstellt, in der Sie viele Details zu einem Benutzer in Panels anzeigen können.

Jedes Feld enthält einige Informationen, die von einem Dienst empfangen wurden, und hat manchmal Aktionen darauf.

Ich habe etwa 10 Panels, und der Betrachter entscheidet, was er sehen will.

Ist es richtig, jedes dieser Panels zu einem separaten Controller zu machen, ODER nur Panels mit Aktionen müssen sich in einem separaten Controller befinden ODER alle Panels in einem Controller?

---

Wenn jede Platte ist ein Controller, und mein Code ist dies:

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> 

Gibt es eine Möglichkeit für mich zu wissen, ob eine Platte leer ist?

Zum Beispiel habe ich ein History-Panel, das ich nur zeigen möchte, wenn es Geschichte zu zeigen gibt, und ich will nicht "No History" zeigen, nur dieses Panel ausblenden wollen.

Aber ich möchte den Panel-Code außerhalb der Ansicht history.html halten.

Answer 1

Sie sollten in Erwägung ziehen, eine Richtlinie dafür zu erstellen. Sie können entweder eine einzelne Direktive erstellen, die alle 10 Panels enthält, und ein Attribut angeben, um anzugeben, welches Panel angezeigt werden soll, oder Sie können 10 verschiedene Direktiven erstellen.

Etwas wie:

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

Dann wird Ihr Umfang Controller so etwas wie haben könnte:

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

Auf diese Weise können Sie Daten von einem Service laden könnte, die die Benutzereinstellungen hat, für die Tafeln angezeigt werden .

Answer 2

Versuchen Sie etwas wie dieses, versuchen Sie nicht, $ scope um jeden Preis zu injizieren. :)

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); 

Dies würde die Vorlage sein:

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

dies Ihre html würde:

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