Benutzerdefinierte Richtlinie Aufruf Ausgabe

Question

ich eine benutzerdefinierte Richtlinie geschrieben haben, um einen Wert zu formatieren, die unter

var directiveapps = angular.module('myApp.currencyValues', []); 
directiveapps.directive('currencyValue', function() { 
return{ 
    scope: { 
     data: '=items' 
    }, 
    template: '<div>$ {{value|number}}</div>', 
    link: function(scope){ 
     scope.value = Math.round(scope.data* 100)/100; 
    } 
}; 
}); 

Diese Richtlinie einen Wert einer Währung formatiert und auch wird es die Dezimalzahl points.This Richtlinie abrunden gegeben funktioniert gut, aber mein Problem beginnt beim Aufruf der Direktiven. i ruft die Richtlinie aus der Sicht wie diese

<div class="overallsummary_meter_txt left"> 
    Total Price<br> 
    <span currency-value items="totalPrice" class="orange_txt"></span> 
</div> 

der Preis Betrag von der db kommt zugewiesen ‚Artikel‘ und es wird in der Richtlinie übergeben werden, das in einigen Fällen funktioniert und immer Preiswert formatiert. jetzt sind meine Fragen

1. In einigen Fällen i leeren Wert bin immer (nur $ -Zeichen ohne formatierten Wert), während die directive.But in diesem gleichen Fall rufen, wenn ich einige Werte harter Code Elemente (Elemente = 8888), dann funktioniert es. Was ist falsch an dieser Richtlinie?

2. Ich denke, diese Direktive ist nicht in beide Richtungen gebunden, wenn nicht wie kann ich das machen?

3. Ein nach dem Aufruf einer Direktive hinzugefügtes Label wird nicht angezeigt. Ich werde ein beispiel

<div currency-value items="downPayment">/Month</div> hier die „/ Monat“ geben wird nicht angezeigt, aber der formatierten Wert angezeigt wird. Wie fügt man nach dem Aufruf einer Direktive etwas im selben div hinzu?

4. Ich nenne will, dass diese Richtlinie in einer Spanne, wo es eine Preisspanne zeigt zum Beispiel

Blick: - Preis: $ 1000 - $ 500

<span class="price_range">{{maxMarcketPrcie}} - {{minMarcketPrice}}</span> 

in diesem Fall wie kann ich zwei Werte in "Elemente" gleichzeitig übergeben? Gibt es alternative Möglichkeiten, dies zu erreichen?

Answer 1

1- Ich sehe mit Ihrer Anweisung nichts falsch. Im folgenden Ausschnitt habe ich mich an Ihrem Beispiel nicht sehr geändert. (nur ersetzt Scope-Variable von controllerAs syntax) Die einzige Sache ist, wenn Sie nur eine Nummer runden möchten, können Sie eine filter anstelle einer Direktive verwenden.

2 Elemente verwendet Zwei-Wege-Bindung. Nichts ist seltsam dort. Vielleicht gibt es etwas in Ihrem Controller, das Fehler verursacht?

function currencyValue() { 
 
    return{ 
 
     scope: { 
 
      data: '=items' 
 
     }, 
 
     template: '<div>$ {{value|number}}</div>', 
 
     link: function(scope){ 
 
     scope.value = Math.round(scope.data* 100)/100; 
 
     } 
 
    }; 
 
}; 
 
function MyController() { 
 
    this.items = 123.666; 
 
} 
 

 
angular.module('myApp', []); 
 
angular 
 
    .module('myApp') 
 
    .controller('MyController', MyController) 
 
    .directive('currencyValue', currencyValue);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="MyController as ctrl" class="overallsummary_meter_txt left"> 
 
     Total Price<br> 
 
     <span currency-value items="ctrl.items" class="orange_txt"></span> 
 
    </div> 
 
</div>

3- Die "label" Sie wollen von transclusion wird hinzuzufügen. Sie müssen in Ihrer Richtlinie transclude: true und ng-transclude hinzufügen.Es werden alle Elemente von Ihrer Richtlinie zu Ihrer Vorlage kopieren:

function currencyValue() { 
 
    return{ 
 
     transclude: true, 
 
     scope: { 
 
      data: '=items' 
 
     }, 
 
     template: '<div>$ {{value|number}}<span ng-transclude></span></div>', 
 
     link: function(scope){ 
 
     scope.value = Math.round(scope.data* 100)/100; 
 
     } 
 
    }; 
 
}; 
 
function MyController() { 
 
    this.items = 123.666; 
 
} 
 

 
angular.module('myApp', []); 
 
angular 
 
    .module('myApp') 
 
    .controller('MyController', MyController) 
 
    .directive('currencyValue', currencyValue);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="MyController as ctrl" class="overallsummary_meter_txt left"> 
 
     Total Price<br> 
 
     <span currency-value items="ctrl.items" class="orange_txt">/Month</span> 
 
    </div> 
 
</div>

4- Um einen Bereich zu Ihrer Richtlinie übergeben Sie haben 2 Möglichkeiten:

• Genau wie Sie bestanden Artikel, können Sie übergeben itemsMin="itemsMin" und itemsMax="itemsMax"

• Oder besser Sie ändern Sie Ihre Artikel Variabel zu einem Objekt:

  this.items = {rangeFrom: 1000, rangeTo: 5000};

Ihre Richtlinie wird dann so etwas wie:

return{ 
     transclude: true, 
     scope: { 
      data: '=items' 
     }, 
     template: '<div>$ {{value.rangeFrom|number}} - $ {{value.rangeTo|number}}<span ng-transclude></span></div>', 
     link: function(scope){ 
     scope.value = {}; 
     scope.value.RangeFrom = Math.round(scope.data.rangeFrom* 100)/100; 
     scope.value.RangeTom = Math.round(scope.data.rangeTo* 100)/100; 
     } 
    }; 

Answer 2

1) Da Sie den Preis sagen ist leer in einigen Fällen und funktioniert gut, wenn Sie hart codieren, dann ist das Problem mit db Antwort. Überprüfen Sie die Antwort gibt die totalPrice.

seine Noch besser sind Ihre Richtlinie unter Format zu schreiben:

directiveapps.directive('currencyValue', function() { 
return{ 
    scope: { 
     items: '=' 
    }, 
    template: '<div>$ {{value|number}}</div>', 
    link: function(scope){ 
     scope.value = Math.round(scope.items* 100)/100; 
    } 
}; 
}); 

und nennen es als

<div class="overallsummary_meter_txt left"> 
    Total Price<br> 
    <span currency-value items="totalPrice" class="orange_txt"></span> 
</div> 

gleiche Art und Weise, was Sie getan haben.

Hinweis: In Richtlinie

scope: { 
    items: '=' 
} 

Artikel: ‚=‘ bedeutet, seine zwei Art und Weise von einem Umfang verbindlich, auch ‚<‘ für eine Möglichkeit, die Bindung von einem Umfang nutzen kann, oder '@' für die einseitige Bindung aus einer Zeichenfolge.

2)/Monat wird dies nicht funktionieren, da die Direktive den Inhalt innerhalb des div mit seiner Vorlage ersetzen wird. Der schnellste Weg zur Lösung Ihres Problems besteht darin, den Inhalt in die Vorlage der Richtlinie zu verschieben. Wie:

Änderung

template: '<div>$ {{value|number}}</div>', 

zu

template: '<div>$ {{value|number}} /month</div>', 

JFYI: Wir haben auch ngTransclude für das Hinzufügen von dynamischen Inhalten verwenden können.