übergeben von Daten an eine Richtlinie für die ng-repeat innerhalb der Richtlinie

Ich halten, stoßen meinen Kopf auf eckig, wenn ich will eine Richtlinie, die eine Liste von Aktionen angezeigt, aber ich will es allgemein genug, um auf mehr als eine Art/Form des Objekts. Für das einfache Beispiel, lässt sagen, ich habe

<select ng-options="person.id by person in people" ng-model="selectPerson">
  <option>
     {{person.name}}
  </option>
</select>

(Beachten Sie, dass dies ist ein einfaches Beispiel, und etwas, was diese einfache würde wahrscheinlich, profitieren nicht von einer Richtlinie)

Nun will ich es in eine generische Richtlinie genannt cool-wählen Sie
Ich könnte versuchen, so etwas wie dies in meinem js

//directive coolselect.directive.js
angular.module('mycoolmodule',[]).directive('coolSelect',function(){
    return {
       restrict:'E',
       templateUrl:'js/coolselectdirective/_coolselect.html',//html from example above
       scope:{
             items:'=',
             displayProperty:'@',
             idProperty:'@',
             selectedItem:'='
       },
       link:function(scope,element){
        //do cool stuff in here
       }
   }
});

Aber dann hier, wo ich beginnen zu werfen, ein wenig in meinem Mund

//html template _coolselect.html
<select ng-model="selectedItem" ng-options="item[scope.idProperty] by item in items">
  <option>      
     {{item[scope.displayProperty]}}
   </option>
</select>

Um ehrlich zu sein ich bin nicht einmal sicher, ob das funktionieren würde in eckig. Ich habe gesehen, was für ein ui-wählen Sie mit einem äußeren Gültigkeitsbereich. Vielleicht ist der Weg zu gehen?
https://github.com/angular-ui/ui-select/blob/master/dist/select.js#L892

Aber dann denke ich, würde ich brauchen, um mit Phantasie transclude, wie ui-wählen Sie ist.
Gibt es nicht einen einfacheren Weg? Bin ich versucht zu machen, die Richtlinien zu allgemein? Ist dies nicht ein problem anderer Leute in?

BEARBEITEN:
Am Ende wäre es ideal für Sie, um so auszusehen.

<cool-select repeat="person.id by person in people" display-property="name"></cool-select>

Sie sollten die Richtlinie als element und verwenden Sie es als eine Klasse? Wenn Sie die restrict-E an C, Sie können es als eine Klasse.
Sorry der Klasse, ist nur zu zeigen, dass es eigene Stile, die diesem element zugeordnet.
Ich nahm die Klasse zu machen, mehr klar

InformationsquelleAutor Thomas Florin | 2015-01-30

Bitte siehe demo unter gewusst wie: übergeben Sie jedes Objekt von array-Richtlinie in ng-repeater

JS:

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {


  $scope.people = [{
    name: "John"
  }, {
    name: "Ted"
  }]

});

app.directive('user', function() {

  return {

    restrict: 'EA',
    template: "<p>*name:{{user.name}}</p>",
    scope: {
      user: '='
    },
    link: function(scope, element, attr) {

      console.log(scope.user);
    }
  };

});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="homeCtrl">

    <div ng-repeat="person in people" user="person"></div>

  </div>
</div>

Dies ist näher an dem, was ich Suche, überprüfen Sie die Bearbeiten-für das, was ich tun möchte.
Letztlich denken, nachdem es, ich denke das ist die beste Lösung, und ich möchte, dass die Menschen, die das gleiche problem haben, um zu sehen, diese Lösung. Ich denke, es ist eine Erinnerung daran, wie das "richtig" zu Komponieren, die Elemente mehrerer Richtlinien.
Ich muss bei dieser Frage, denn es hat mir geholfen, zu sehen, wie viel von einem dummy bin ich nicht setzen Klammern, um meine scope Daten-Objekte und nicht Fragen, warum es nicht funktioniert hat... Hut ab sir

InformationsquelleAutor sylwester

0

Es gibt ein paar Dinge hier zu beachten:
1. Indem ng-repeat auf die select Sie wiederholen die select.
2. Die select - element ein spezielles Attribut für die Wiederholung Optionen genannt ng-options.
3. Sie nicht brauchen, um beziehen sich auf die scope in der Vorlage, sondern nur seine Eigenschaften. In einem AngularJS Vorlage scope impliziert, in der Tat, dass ist das Ziel von scope, die "scope", dass Sie den Zugriff auf Eigenschaften innerhalb.
4. Sie nicht instanziieren der coolSelect Richtlinie, da haben Sie eingeschränkt auf die Verwendung als element aber Sie versuchen, es zu benutzen als ein Klasse.
5. Wenn Sie möchten, um eine Richtlinie zur Vereinfachung dieses Prozesses jedes mal, wenn Sie wollen, wiederholen Sie Optionen, oder anderen Komponenten, die Sie wird müssen, verwenden Sie eine syntax wie item[displayProperty] um es generic.
- Ja sorry, ich war nur zu Peitschen, bis ein kurzes Beispiel, so gibt es einige Fehler im code, ich habe versucht, es sauber zu machen, mehr klar.
InformationsquelleAutor Resist Design
0

Warum Sie brauchen, um zu bauen, die Optionen selbst mit displayProperty in Optionen-tag-ng-Optionen können mehr tun,
```
<select
ng-model="myOption"
ng-options="value.id as value.label  for value in myOptions">
<option value="">nothing selected Text</option>
</select>
```
Wert.id ist der Wert gespeichert, in der ngModel meineoption
Wert.label ist der angezeigte label
```
<option value="">nothing selected Text</option>
```
dafür, dass nichts ausgewählt-option, wenn nötig

InformationsquelleAutor micha

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Es gibt ein paar Dinge hier zu beachten: