AngularJS - Lokale Direktive und übergeordneter Bereich

Question

Ich fange gerade an, Direktiven zu schreiben, und ich bin mir ziemlich sicher, dass ich das ganze Konzept der Definition eines "isolierten" Bereichs für eine Direktive verstehe.

Meine Richtlinie numberRoulette soll jede Ziffer (oder eine angegebene Anzahl von Ziffern) durch das Attribut fields="some-number-here" ) in einer gelieferten Nummer mit Zufallszahlen. Nach jeder verstrichenen Sekunde hört eine Ziffer auf zu animieren und wird auf die vorgesehene Zahl gesetzt. Es ist ein bisschen wie ein Spielautomat

<div ng-app="myApp">
  <div ng-controller="MasterCtrl">
    <span number-roulette fields="10" ng-model="number">
      {{number}}
    </span>
  </div>
</div>

Das Problem, auf das ich stoße, ist, dass ich, wenn ich eine Zwei-Wege-Bindung zwischen dem Richtlinienbereich und einem Bereich, der von einem Controller verwendet wird, herstelle MasterCtrl werden meine Werte nicht mehr angezeigt.

app.directive('numberRoulette', function($timeout) {
  return {
    restrict: 'A',
    scope: {showNumber: '=ngModel'},
    ...
  };
});

function MasterCtrl($scope) {
  $scope.number = 1000;
}

JSFiddle: http://jsfiddle.net/nguyening/aX6Zm/3/

Answer 1

Verwenden Sie {{showNumber}} oder umziehen {{number}} außerhalb der Spannweite.

Innerhalb des Bereichs haben Sie nur Zugriff auf die Eigenschaften des Richtlinienbereichs (z. B., showNumber ), da ein isolierter Bereich für die Richtlinie erstellt wurde.

Außerhalb der Spanne haben Sie Zugriff auf die Eigenschaften des Controllerbereichs, z. B., number .

Aktualisierung: ng-model ist hier nicht erforderlich. Jedes Attribut genügt, z. B.:

<span number-roulette fields="10" model="number">

Dann in der Richtlinie:

scope: {showNumber: '=model'},